I have successfully created a stacked bar chart, but I am struggling to add a 10px spacing between two vertical stacked bar charts. I tried using barGap={8880} and barCategoryGap={100}, but it did not work as expected. Below is the code snippet and stackblitz link provided. Can anyone help me fix this issue?
Click here for StackBlitz example
import { Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts';
import './style.css';
const data = [
{
name: 'Page A',
uv: 4000,
pv: 400,
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 function App() {
return (
<BarChart width={500} height={300} data={data} margin={{ top: 5, right: 50, bottom: 5, left: 50 }}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="pv" stackId="a" fill="#8884d8" radius={[100, 100, 100, 100]} barGap={8880} barCategoryGap={100} />
<Bar dataKey="uv" stackId="a" fill="#82ca9d" radius={[100, 100, 100, 100]} barGap={8880} barCategoryGap={100} />
</BarChart>
);
}