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

user_6378530 0
Viewed 3859

enter image description here

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

react-highcharts highcharts bar-chart
2 Answers

groundPadding and pointPadding will be inside bar instead of series

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

Demo

user_38983390

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/

user_63687610
Related