CODEWITHSUNDEEP
highchartsbar-chartcolumn-chart
user10404931
user10404931

Reputation: 23

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
    }
},

Upvotes: 2

Views: 216

Answers (1)

Karol Kołodziej
Karol Kołodziej

Reputation: 672

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/

Upvotes: 7

Related Questions