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
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