How to add gap between two bars (same stackId) in bar graph in recharts - recharts

Question

I don't understand how to add a gap between two stackId's. I have tried to add an extra bar and I am giving the color white which is working fine for small values. Is there any another way to find the gap between two stackId.
Code:
import React, { PureComponent } from 'react';
import BarChart from '#bit/recharts.recharts.bar-chart';
import Bar from '#bit/recharts.recharts.bar';
import XAxis from '#bit/recharts.recharts.x-axis';
import YAxis from '#bit/recharts.recharts.y-axis';
import CartesianGrid from '#bit/recharts.recharts.cartesian-grid';
import Tooltip from '#bit/recharts.recharts.tooltip';
import Legend from '#bit/recharts.recharts.legend';
const data = [
{
name: 'Page A', uv: 4000, pv: 2400, amt: 2400,
},
{
name: 'Page B', uv: 3000, pv: 1398, amt: 2210,
},
{
name: 'Page C', uv: 2000, pv: 9800, amt: 2290,
},
{
name: 'Page D', uv: 2780, pv: 3908, amt: 2000,
},
{
name: 'Page E', uv: 1890, pv: 4800, amt: 2181,
},
{
name: 'Page F', uv: 2390, pv: 3800, amt: 2500,
},
{
name: 'Page G', uv: 3490, pv: 4300, amt: 2100,
},
];
export default class Example extends PureComponent {
render() {
return (
<BarChart
width={500}
height={300}
data={data}
margin={{
top: 20, right: 30, left: 20, bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="pv" stackId="a" fill="#8884d8" />
<Bar dataKey="uv" stackId="a" fill="#82ca9d" />
</BarChart>
);
}
}
Screenshot:
screenshot for bar graph

Answer 1

In order to have a bigger gap between to Bars, you can use the barCategoryGap, in which you specify how much gap you need between two Bars in px. However, using this property will also make your bars thiner. To have your Bars look wider, you'll simply need to change the width of the BarChart to a bigger value.
In the end, you could have something of the like:
<BarChart
width={600}
barCategoryGap={15}
height={300}
[...]
With the following result: