我试图简单地交换x轴的y轴上的条形图使用recharts。
然而,当我试图将布局从水平条切换到垂直条时,我的图表变得不稳定,不是我想要的布局。
我想要的图表由4个互相堆叠的条形图组成。y轴是条形图的名称,x轴是条形图的值。
下面是我的代码和一个codesandbox链接:
codesandbox:https://codesandbox.io/s/simple-bar-chart-forked-6ksutx?file=/src/App.tsx:176-180
import "./styles.css";
import React from "react";
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend
} from "recharts";
const data = [
{
name: "A",
value: 5
},
{
name: "B",
value: 10
},
{
name: "C",
value: 15
},
{
name: "D",
value: 20
}
];
export default function App() {
return (
<BarChart width={500} height={300} data={data} layout="vertical">
<XAxis dataKey="name" type="category" />
<YAxis dataKey="value" type="number" />
<Bar dataKey="name" fill="#8884d8" />
<Tooltip/>
</BarChart>
);
}
1条答案
按热度按时间c8ib6hqw1#
将XAxis类型设置为number对我来说很有用,下面的例子是如何在BarChart(Stack)上实现它