How to adjust spacing between bars [Highcharts.js]

Bobby Fade 0
Viewed 21

I have got a widget, that was made using highcharts.js and i have no control over its creation. Using .update() method i need to adjust spacings between these bars. I tried using pointPadding: 0, groupPadding: 0, but it does seem to work. Changing the height of the whole chart kinda works, but the solution is not flexible. The spacings should be of certain height (i.e 20px) enter image description here

highcharts javascript
1 Answers

Based on the point amount, you can dynamically adapt the chart's height. For example:

const pointWidth = 20;
let allowChartRedraw = true;

Highcharts.chart('container', {
  chart: {
    events: {
      render: function() {
        if (allowChartRedraw) {
          const pointsAmount = this.series[0].points.length;
          allowChartRedraw = false;
          this.setSize(
            null,
            pointsAmount * pointWidth * 2 + (this.chartHeight - this.plotHeight),
            false
          );
          allowChartRedraw = true;
        }
      }
    }
  },
  series: [{
    type: 'bar',
    pointPadding: 0,
    groupPadding: 0,
    pointWidth,
    data: [...]
  }]
});

Live demo: http://jsfiddle.net/BlackLabel/wfxu36gd/

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

ppotaczek0
Related