How to remove space in between bars in HighCharts bar chart?

Question

I'm trying to make a simple bar chart using HighCharts.

I'd like to remove the space in between the bars. My research led me to believe that the properties groundPadding and pointPadding were responsible for this space. But setting both to 0 did not change anything.

const config = {
      chart: {
        type: 'bar',
        spacingTop: 0,
        spacingRight: 0,
        spacingBottom: 0,
        spacingLeft: 0,
        // marginTop: 0,
        // marginRight: 0,
        // marginBottom: 0,
        // marginLeft: 0
      },
      title: {
        text: null
      },
      legend: {
        enabled: false
      },
      credits: {
        text: ''
      },
      xAxis: {
        categories: options.map(option => option.option),
        // lineWidth: 0,
        // tickWidth: 0,
      },
      yAxis: {
        title: {
          enabled: false,
        },
        gridLineWidth: 0,
        tickAmount: 0,
        showFirstLabel: false,
        showLastLabel: false
      },
      series: [{
        data: options.map(option => option.votes)
      }],
      plotOptions: {
        bar: {
          dataLabels: {
            enabled: true
          }
        },
        series: {
          pointWidth: 20,
          groundPadding: 0,
          pointPadding: 0
        }
      }
    };

Any ideas?

EDIT:

Not sure if relevant, but the red div wrapping my chart is:

<div style={{ width: '100%', height: '100%', margin: 'auto', border: '2px solid red' }}>
    <ReactHighCharts config={config}></ReactHighCharts>
</div>

And the green div has dimensions: width: 350px and height: 400px

Demo: https://remove-space-between-bar-hbslv6.stackblitz.io

score 4 · Answer 1 · answered Nov 23 '17 at 05:51

4

groundPadding and pointPadding will be inside bar instead of series

plotOptions: {
  bar: {
    groupPadding: 0,
    pointPadding: 0,
    dataLabels: {
      enabled: true,
    }
  }
},

Demo

answered Nov 23 '17 at 05:51

Deep 3015

9,929
5
30
54

I tried that but it didn't do anything. Do you think it's because of the dimensions of the div wrapping it? (I added an edit if that's the case) – doctopus Nov 23 '17 at 07:11
Add live example or edit my example to show error you are facing – Deep 3015 Nov 23 '17 at 08:30
Made a demo here: https://remove-space-between-bar-hbslv6.stackblitz.io – doctopus Nov 23 '17 at 09:12
I think error is due to `pointWidth: 20,` in series plot options. remove it and it will work .demo https://stackblitz.com/edit/remove-space-between-bar-aqp3ua?file=index.js – Deep 3015 Nov 23 '17 at 09:27
I see, but what I’m trying to achieve is to have a set bar width regardless of how many categories i have on the xAxis. And the chart height gets longer depending on how many bars I have. How would I do this ? – doctopus Nov 23 '17 at 09:59
you can use [scroll for highcharts](https://www.highcharts.com/blog/news/224-scrollbars-for-any-axis/). Chart height will not increase – Deep 3015 Nov 23 '17 at 10:21

score 1 · Answer 2 · answered Nov 23 '17 at 17:01

You have a mistake in your code. You set groundPadding instead of groupPadding. Also, if you are using pointPadding and groupPadding, setting pointWidth before them will not take effect, as pointWidth is calculated based on these two parameters. If you want to have one width for all points, set only pointWidth property. As for increasing height of the chart each time another point is added, you can check the number of points on load event and change chart size adequately using chart.setSize function. Take a look at the example below.

API Reference:
https://api.highcharts.com/class-reference/Highcharts.Chart.html#setSize

Example:
http://jsfiddle.net/221k5wLh/

How to remove space in between bars in HighCharts bar chart?

2 Answers2