如何为React中Recharts柱状图设置柱宽？代码无效求可行方案

方法一：修正width属性的参数获取（控制柱子垂直厚度/水平柱状图高度） #

原代码的问题在于width函数的参数使用错误，Recharts传递给该函数的是包含data字段的对象，而非直接的数据源项。修改后代码如下：

import React from "react";
import { Bar, BarChart, ResponsiveContainer, Tooltip } from "recharts";

interface BarData {
  name: string;
  value: number;
  width: number;
}

const data: BarData[] = [
  { name: "Bar 1", value: 10, width: 40 },
  { name: "Bar 2", value: 20, width: 60 },
  { name: "Bar 3", value: 30, width: 80 },
];

const Barchart: React.FC = () => {
  return (
    <ResponsiveContainer height={400}>
      <BarChart data={data} layout="horizontal" barGap={10}>
        <Bar
          dataKey="value"
          // 正确获取数据源中的width字段
          width={(props) => props.data.width}
          fill="#5e5e5e"
          radius={[0, 4, 4, 0]}
        />
        <Tooltip />
      </BarChart>
    </ResponsiveContainer>
  );
};

export default Barchart;

注意：layout="horizontal"模式下，width属性控制柱子的垂直高度；垂直柱状图模式下，width控制柱子的水平宽度。

方法二：使用cellRender完全自定义柱条（灵活控制尺寸） #

如果需要更精细的尺寸控制，比如同时调整水平长度和垂直厚度，可通过cellRender自定义每个柱条的渲染逻辑：

import React from "react";
import { Bar, BarChart, ResponsiveContainer, Tooltip, CellProps } from "recharts";

interface BarData {
  name: string;
  value: number;
  barWidth: number; // 垂直厚度
  barLength: number; // 水平长度
}

const data: BarData[] = [
  { name: "Bar 1", value: 10, barWidth: 40, barLength: 150 },
  { name: "Bar 2", value: 20, barWidth: 60, barLength: 250 },
  { name: "Bar 3", value: 30, barWidth: 80, barLength: 350 },
];

const CustomBarCell = ({ x, y, data }: CellProps<BarData>) => {
  return (
    <rect
      x={x}
      y={y - data.barWidth / 2} // 保持柱条垂直居中
      width={data.barLength}
      height={data.barWidth}
      fill="#5e5e5e"
      rx={4}
    />
  );
};

const Barchart: React.FC = () => {
  return (
    <ResponsiveContainer height={400}>
      <BarChart data={data} layout="horizontal">
        <Bar dataKey="value" cellRender={CustomBarCell} />
        <Tooltip />
      </BarChart>
    </ResponsiveContainer>
  );
};

export default Barchart;

方法三：用自定义宽度字段控制水平长度 #

如果需求是让柱条的水平长度由width字段决定而非value，直接将dataKey替换为width即可：

// 其他代码不变
<Bar
  dataKey="width" // 用width字段作为柱条水平长度的依据
  width={40} // 统一设置柱条的垂直厚度
  fill="#5e5e5e"
  radius={[0, 4, 4, 0]}
/>

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