Trouble achieving spacing between stacked bar charts in React with Recharts

Question

I am able to develop the stacked bar chart but I am not sure how to leave a 10px space between two vertical stacked bar charts. I gave the barGap={8880} and barCategoryGap={100} but still no luck. Providing the code and stackblitz below. Can you let me know how to fix it.

https://stackblitz.com/edit/react-zta9v9?file=src%2FApp.js,src%2Fstyle.css

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>
  );
}

Answer 1

import './style.css';
import React from 'react';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from 'recharts';

const data = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 400,
    amt: 2400,
    gap: 1000,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210,
    gap: 1000,
  },
  {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
    amt: 2290,
    gap: 1000,
  },
  {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
    amt: 2000,
    gap: 1000,
  },
  {
    name: 'Page E',
    uv: 1890,
    pv: 4800,
    amt: 2181,
    gap: 1000,
  },
  {
    name: 'Page F',
    uv: 2390,
    pv: 3800,
    amt: 2500,
    gap: 1000,
  },
  {
    name: 'Page G',
    uv: 3490,
    pv: 4300,
    amt: 2100,
    gap: 1000,
  },
];

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="gap" stackId="a" fill="transparent" />
      <Bar
        dataKey="uv"
        stackId="a"
        fill="#82ca9d"
        radius={[100, 100, 100, 100]}
        barGap={8880}
        barCategoryGap={100}
      />
    </BarChart>
  );
}

I haven't been able to find a proper fix but if you need to get a temporary fix then this is my solution.

You would basically add a transparent bar in between the two main bars as the gap. The gap distance would be determined by the gap data value. You will need to add additional value within your data array for the gap!

Hope this helps fix your problem for the time being!