How to minimize gaps between bars without changing their width

Question

Let's say I have this chart:

I need to minimize gaps between the bars.

I'm aware about this answer,but if you provide barCategoryGap property, the width of the bars will be increased.

U need to end up with smth like that:

So, there should be no gaps (1px is ok) between the bars and bars should have 10-15px width

I have tried to change next properties:barCategoryGap, barGap, barSize but nothing helps.

Sandbox

score 1 · Answer 1 · answered May 05 '21 at 11:24

1

I'm not sure if this is what you want but after playing around a bit this is what i got. I notice you have the barSize prop in the <Bar> component. What i've got so far.

<div>
  <ResponsiveContainer width="100%" height="100%">
   <BarChart data={data} barGap="1%">
     <CartesianGrid strokeDasharray="3 3" />
     <XAxis dataKey="name" />
     <YAxis />
     <Tooltip />
     <Legend />
     <Bar dataKey="pv" fill="#8884d8" />
   </BarChart>
  </ResponsiveContainer>
</div>

answered May 05 '21 at 11:24

Tom

107
7

Thanks! try to add `barSize={20}` to the `Bar` component. That is the width I want them to have. Yo will see that there is still a gap :( – captain-yossarian from Ukraine May 05 '21 at 11:36
Try ```barSize={50}``` and remove ```barCategoryGap="1" barGap="2" ``` – Tom May 06 '21 at 12:10

How to minimize gaps between bars without changing their width

1 Answers1