React TS Vite项目中Recharts水平条形图Value标签定位优化求助

要把数值标签固定在chart-container容器的末尾，不能局限于Recharts内部的坐标系定位，需要将标签组件移出图表，通过容器布局来控制位置。以下是修改后的完整代码：

import { useState } from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip, LabelList } from 'recharts';

type HorizontalBarChartDataType = {
  name: string;
  value: number;
};

interface IBarChartLabel {
  x: number;
  y: number;
  width: number;
  value: number;
}

function HorizontalBarChart() {
  const [horizontalBarChartData] = useState<HorizontalBarChartDataType[]>([
    { name: "Group A", value: 1500 },
    { name: "Group B", value: 4000 },
  ]);

  const BarChartLabel: React.FC<IBarChartLabel> = ({
    x,
    y,
    value,
  }: {
    x: number;
    y: number;
    value: number | string;
  }) => {
    const newX = x + 5;
    const newY = y - 5;
    return (
      <text
        x={newX}
        y={newY}
        fill="#666"
        textAnchor="start"
        fontFamily="Poppins"
      >
        {value}
      </text>
    );
  };

  // 自定义数值标签组件，放在容器末尾
  const ValueLabels = () => {
    return (
      <div className="value-labels">
        {horizontalBarChartData.map((item, index) => (
          <div key={index} className="value-label">
            {item.value}
          </div>
        ))}
      </div>
    );
  };

  return (
    <div className="chart-container">
      <BarChart
        width={220} // 缩小图表宽度，给标签留出空间
        height={50 * horizontalBarChartData.length}
        data={horizontalBarChartData}
        layout="vertical"
      >
        <XAxis type="number" axisLine={false} display="none" />
        <YAxis type="category" axisLine={false} display="none" />
        <Tooltip />
        <Bar dataKey="value" fill="#B37FEB" barSize={10}>
          <LabelList
            dataKey="name"
            position="top"
            fill="#262626"
            content={<BarChartLabel x={-1} y={-1} width={-1} value={-1} />}
          />
          {/* 移除原有的value LabelList */}
        </Bar>
      </BarChart>
      <ValueLabels />
    </div>
  );
}

export default HorizontalBarChart;

添加对应的CSS样式（可放在组件style标签或全局样式文件中）：

.chart-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 292px; /* 保持容器总宽度和原图表一致 */
}

.value-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%; /* 和图表高度同步，让标签垂直均匀对齐 */
}

.value-label {
  font-family: Poppins;
  color: #000000;
  text-align: right;
}

关键修改说明： #

• 容器布局：通过flex布局的chart-container将图表和标签横向排列，justify-content: space-between直接让标签对齐到容器最右侧（末尾）。
• 标签独立化：把数值标签从Recharts的Bar组件中剥离，写成独立的ValueLabels组件，脱离图表坐标系限制，完全由CSS控制位置。
• 对齐匹配：利用value-labels的height: 100%和垂直flex布局，让每个标签自动和对应条形的垂直位置对齐；如果需要更精细调整，可给单个标签设置margin-top或用绝对定位结合索引计算top值。
• 宽度适配：缩小原图表宽度，避免和标签重叠，保证容器总宽度符合需求。

内容的提问来源于stack exchange，提问作者Vishrutha