10

How to set the bars thickness? 

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

Current Result

enter image description here

Data set

[{1: 0, name: "1"},
{2: 0, name: "2"},
{3: 1, name: "3"},
{4: 1, name: "4"},
{5: 2, name: "5"}]
MichaelS
  • 7,023
  • 10
  • 51
  • 75

3 Answers3

9

By using the barSize key in the Bar tag:

<Bar dataKey="pv" barSize={20} fill="#8884d8" />
Ahsan Farooq
  • 819
  • 9
  • 10
5

You can use barSize api to set width on each Bar element

Refer Recharts-Bar for more reference and examples

Iniamudhan
  • 478
  • 4
  • 17
1

Use barCategoryGap={30} barGap={5}

Tawhidul Islam Khan
  • 106
  • 1
  • 4
  • 3
    While this code may solve the OP's issue, it is better to add context, or an explanation as to why this solves the OP's problem, so future visitors can learn from your post, and apply this knowledge to their own issues. High Quality Answers are much more likely to be upvoted, and contribute to the value and quality of SO as a platform. You can also add a link to documentation, if that helps. – SherylHohman May 07 '20 at 17:52