Recharts Horizontal bar chart positioning

689 Views Asked by At

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>
    );
  };

  return (
    <BarChart
      width={292}
      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} />}
        />

        <LabelList
          dataKey="value"
          position="right"
          fill="#000000"
          textAnchor="middle"
          dx={90}
        />
      </Bar>
    </BarChart>
  );
}

export default HorizontalBarChart;
this is my code snippet design

enter image description here

i am working on a react tyoescript vite project and using recharts library here for the chart design and i want to change the positioning of the datakey="value" position
"Revise the code to display value data at the end and optimize the values label list, aligning it with the requested design." i am using recharts for the chart design and here i want

 <LabelList
          dataKey="value"
          position="right"
          fill="#000000"
          textAnchor="middle"
          dx={90}
        />
       this to be placed at the end  <div className="chart-container">
            <HorizontalBarChart />
          </div> inside this div i have also shared the changes to be made design  i tried using many methods but its not working
0

There are 0 best solutions below