Rechartd:垂直条形图 - 设置条形粗细

Mic*_*elS 11 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>
Run Code Online (Sandbox Code Playgroud)

当前结果

在此输入图像描述

数据集

[{1: 0, name: "1"},
{2: 0, name: "2"},
{3: 1, name: "3"},
{4: 1, name: "4"},
{5: 2, name: "5"}]
Run Code Online (Sandbox Code Playgroud)

Ahs*_*ooq 11

通过使用 Bar 标签中的 barSize 键:

<Bar dataKey="pv" barSize={20} fill="#8884d8" />
Run Code Online (Sandbox Code Playgroud)


Ini*_*han 5

您可以使用barSizeapi 设置每个 Bar 元素的宽度

请参阅Recharts-Bar了解更多参考和示例