javascripthtmlreactjsreact-reduxrecharts

Recharts issue with gaps between Bars

I am using BarChart from the Recharts library, however I am facing the issue while adding the space between bars. I have tried to use the attribute barGap={20} barCategoryGap={20}, however it doesn't seem to be working.

  <ResponsiveContainer width="100%" height={230}>
  <BarChart layout="vertical" width="100%" height={600} data={data} barGap={100} barCategoryGap={-20}
        margin={{top: 20, right: 20, bottom: 20, left: 20}}>
      <CartesianGrid stroke='#f5f5f5'/>
      <XAxis interval={0} type="number"/>
      <YAxis width={180} dx={-10} interval={0} dataKey="name" type="category"/>
      <Tooltip cursor={{fill: '#fff'}}/>
      <Legend/>

      <Bar dataKey='pv' barSize={18} fill='#f19135' radius={[0,20,20,0]} background={{fill: "#FFF"}}/>
   </BarChart>
   </ResponsiveContainer>
Solution

  • It doesn't work for you because you specified barSize in your <Bar>.

    The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.

    If you remove barSize you will be able to change gap between your Bars with barCategoryGap property. Either with this barCategoryGap="10%"(percents) or this barCategoryGap={10}(pixels) syntax

    JSFiddle