CODEWITHSUNDEEP
reactjsbar-chartstacked-chartrecharts
Zsolt Dobak
Zsolt Dobak

Reputation: 81

How can I add a gap between the bars in Recharts Bar chart (vertical, stacked)

I'm trying to set up Recharts to display a vertical stacked barchart with some gap between the bars, but I'm not able to set any gap.

This is how my code looks like.

<ResponsiveContainer height={23} width={'100%'}>
  <BarChart
    data={data}
    layout={'vertical'}
    barGap={10}
    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
  >
    <XAxis type={'number'} hide domain={['dataMin', 'dataMax']} />
    <YAxis
      dataKey='axis'
      type={'category'}
      axisLine={false}
      tickLine={false}
      hide
    />
    {keys.map((key: string, index: number) => (
      <Bar key={key} stackId={'stack'} dataKey={key} fill={colors[key]} />
    ))}
  </BarChart>
</ResponsiveContainer>;

Upvotes: 0

Views: 8337

Answers (2)

tL4302
tL4302

Reputation: 99

I was able to get this working stylistically by adding
style={{ stroke: '#fff', strokeWidth: 2 }} to <BarChart>:

<BarChart
  layout="vertical"
  data={barChartData}
  height={300}
  barSize={24}
  barCategoryGap={16}
  style={{ stroke: '#fff', strokeWidth: 2 }}
>

If you were to add empty <Bar /> data to achieve this, you might encounter some weirdness once you start using Tooltips on the chart.

Upvotes: 3

Orlyyn
Orlyyn

Reputation: 2614

To add a gap between the bars, you could add another Bar component, that would have a fixed value, filled with a transparent color, so that you can have an illusion of gap between two bars in a stacked bar.

To have the gap value however, you'll need to update the data array beforehand, to add the gap value with its fixed value (set to 100 for example).

With this workaround, the solution could look like this:

Here's the associated code to the image:

import React, { PureComponent } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid } from 'recharts';

const data = [
  /* Add the gap key to each data line; could also be done in a forloop */
  { name: 'Page A', uv: 4000, pv: 2400, amt: 2400, gap: 100 },
  { name: 'Page B', uv: 3000, pv: 1398, amt: 2210, gap: 100 },
  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290, gap: 100 },
  { name: 'Page D', uv: 2780, pv: 3908, amt: 2000, gap: 100 },
  { name: 'Page E', uv: 1890, pv: 4800, amt: 2181, gap: 100 },
  { name: 'Page F', uv: 2390, pv: 3800, amt: 2500, gap: 100 },
  { name: 'Page G', uv: 3490, pv: 4300, amt: 2100, gap: 100 },
];

const keys = ['uv', 'pv'];
const colors = ['#8884d8', '#82ca9d'];

export default class Example extends PureComponent {
  render() {
    return (
      <BarChart
        width={500}
        height={300}
        data={data}
        margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
        layout='vertical'
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis type='number' />
        <YAxis type='category' dataKey='name' />
        {keys.map((key: string, index: number): any => {
          const bars = [];
          bars.push(<Bar dataKey={key} stackId="a" fill={colors[index]} />);
          /* Add a bar just for the gap after each bar */
          bars.push(<Bar dataKey='gap' stackId="a" fill='transparent' />);
          return bars;
        })}
      </BarChart>
    );
  }
}

Upvotes: 2

Related Questions