Search code examples
highchartsbar-chartcolumn-chart

High charts: Can we reduce the distance between two bars in grouped column chart

Using this example from Highcharts for displaying grouped column chart with negative values https://www.highcharts.com/demo/column-negative

When we have less attributes in x-axis, the distance between both bars of the same value becomes wider. Can we reduce this distance by using any option & make the two bars look close to each other for each month. Attaching output with question. Sample chart

Options I am using are:

plotOptions: {
    column: {
       dataLabels: {
          enabled: false
       },
       pointWidth: 15
    },
    series: {
       centerInCategory: true
    }
},
Solution

  • Using the groupPadding and pointWidth property you can adjust the space between the grouped columns.

     plotOptions: {
    column: {
      dataLabels: {
        enabled: false
      },
      groupPadding:0.35,
      pointWidth: 25
    }
  },

    API:
    https://api.highcharts.com/highcharts/series.column.groupPadding
    https://api.highcharts.com/highcharts/series.column.pointWidth

    Live demo:
    https://jsfiddle.net/BlackLabel/kfwz7gce/