CODEWITHSUNDEEP
highchartsbar-chart
Augustin Riedinger
Augustin Riedinger

Reputation: 22270

highcharts bar chart no space between stacked bars not working

So I have this bar chart with following options:

const options = {
  chart: {
    type: 'bar',
  },
  title: false,
  credits: {
    enabled: false,
  },
  xAxis: {
    visible: false
  },
  yAxis: {
    tickInterval: this.kpis.consumption,
    endOnTick: false,
    labels: {
      enabled: false
    },
    // visible: false,
    min: 0,
    title: {
      text: null
    }
  },
  tooltip: {
    enabled: false,
    headerFormat:null,
    pointFormat:
      '<b>{series.name}</b>: <b>{point.percentage:.0f}%</b><br/>',
    shared: true
  },
  plotOptions: {
    series: {
      enableMouseTracking: false,
      groupPadding: 0,
      pointPadding: 0,
      borderWidth: 0,
    },
    bar: {
      stacking: 'normal',
    }
  },
  series: [{
    name: 'Total Consumption',
    color: '#f8f8f8',
    data: [this.kpis.consumption],
    stack: 'consumption',
    maxPointWidth: 48,
    dataLabels: [{
      ...defaultDataLabel,
      color: chartColors.total,
      format: "<b>{y:.2f}</b> kWh ({series.name})",
      y: 0,
      style: {
        fontSize: '1rem',
        fontWeight: 'normal',
      },

    }],
  }, {
    name: 'Surplus certificates (Excesses)',
    color: chartPatterns.excesses,
    data: [this.kpis.excesses],
    stack: 'certificates',
    maxPointWidth: 80,
    dataLabels: [{
      ...defaultDataLabel,
      color: chartColors.excesses,
    }],
  }, {
    name: 'Unmatched consumption (Shortfalls)',
    color: chartPatterns.shortfalls,
    data: [this.kpis.shortfalls],
    stack: 'certificates',
    maxPointWidth: 80,
    dataLabels: [{
      ...defaultDataLabel,
      color: chartColors.shortfalls,
    }],
  }, {
    name: 'Consumption ready to match with CFE certificates',
    color: chartPatterns.ready,
    data: [this.kpis.allocatable],
    stack: 'certificates',
    maxPointWidth: 80,
    dataLabels: [{
      ...defaultDataLabel,
      color: chartColors.ready,
    }, {
        enabled: true,
        format: "{point.percentage:.0f}%",
        style: {
          fontSize: '2rem',
        },
        color: 'white',
    }],
  }, {
    name: 'Consumption matched with CFE* certificates',
    color: chartPatterns.matched,
    data: [this.kpis.allocations],
    stack: 'certificates',
    maxPointWidth: 80,
    dataLabels: [{
      ...defaultDataLabel,
      color: chartColors.matched,
    }, {
        enabled: true,
        format: "{point.percentage:.0f}%",
        style: {
          fontSize: '1rem',
        },
        color: 'white',
    }],
  }]
}

The pointPadding: 0, groupPadding: 0 works, but if I add to series: maxPointWidth, then there is an unexpected space between the two bars:

enter image description here

Expected:

enter image description here

Why is that? How can I remove this behavior? I tried to set custom chart height, but then my data labels get compacted and don't behave expectingly.

Thanks for the help

EDIT: here's the fiddle of the current chart:

https://jsfiddle.net/Lso1z8c3/1/

Thanks

Upvotes: 1

Views: 151

Answers (1)

magdalena
magdalena

Reputation: 3703

You use stack: 'A' and stack: B' and have one y value for each series. It means that two stacked bars are grouped for one category.

API: https://api.highcharts.com/highcharts/series.column.stack

In that case, you can set the groupPadding to a higher value, which moves the column together for the group.

API: https://api.highcharts.com/highcharts/series.bar.groupPadding

  plotOptions: {
    series: {
      enableMouseTracking: false,
      groupPadding: 0.3,
      pointWidth: 80,
      stacking: 'normal'
    }
  },

Demo: https://jsfiddle.net/BlackLabel/9tveyrk4/

Be aware that using the fixed value for the pointWidth disturbs the chart responsivity, but you can customize those values for particular chart width using the responsive rules:

API: https://api.highcharts.com/highcharts/responsive

Upvotes: 0

Related Questions