reactjs - 记录 : Vertical bar chart - set bar thickness

标签 reactjs recharts

如何设置条形粗细?

<ResponsiveContainer width='100%' aspect={4.0 / 3.0}>
                        <BarChart data={data} layout="vertical">
                            <XAxis type="number" hide />
                            <YAxis dataKey="name" hide reversed type="category" />
                            <Tooltip />
                            <Legend />
                            <Bar legendType="star" dataKey="1" fill="#ff6f31" />
                            <Bar legendType="star" dataKey="2" fill="#ff9f02" />
                            <Bar legendType="star" dataKey="3" fill="#ffcf02" />
                            <Bar legendType="star" dataKey="4" fill="#99cc00" />
                            <Bar legendType="star" dataKey="5" fill="#88b131" />
                        </BarChart>
                    </ResponsiveContainer>

当前结果

enter image description here

数据集

[{1: 0, name: "1"},
{2: 0, name: "2"},
{3: 1, name: "3"},
{4: 1, name: "4"},
{5: 2, name: "5"}]

最佳答案

通过在 Bar 标记中使用 barSize 键:

<Bar dataKey="pv" barSize={20} fill="#8884d8" />

关于reactjs - 记录 : Vertical bar chart - set bar thickness,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48907962/

相关文章:

reactjs - Recharts 雷达图上的自定义标签

recharts - recharts 中 X 轴标签显示不全

reactjs - 重新绘制饼图,里面有/值标签

javascript - 如何处理 onKeyDown/Up 在 React 中打开列表项

reactjs - 让WebStorm添加style={}而不是style =""

reactjs - 如何在图表中的 x 轴上显示自定义值?

javascript - Recharts 在 React 中不起作用 - 'recharts' 不包含名为 'Recharts' 的导出

mysql - Reactjs - 日期类型字段不更新DATE类型的MYSQL日期列

reactjs - React - 重定向页面以显示数据修改?

reactjs - 尝试导入错误 : 'alpha' is not exported from '@material-ui/core/styles'