CODEWITHSUNDEEP
highcharts
ardnegaN
ardnegaN

Reputation: 3

Highchart combination chart with stacked column

I'm trying to achieve a combination chart with column and stacked chart for summary.

Exactly like the one they have it in the demo section. however, i want to display a stacked column chart instead of pie in this example. Highcart combination chart example demo

[this is not a link]https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo/

Appreciate your suggestions.

Upvotes: 0

Views: 468

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

You can achieve it by adding second axes and stacked column series linked to them. Series should have null points to create an offset on the right side. Check the example posted below.

Code:

var defaultColumnSeries = {
  type: 'column',
  stacking: 'normal',
  dataLabels: {
    enabled: true,
    style: {
      fontSize: '9px'
    }
  },
  showInLegend: false,
  groupPadding: 0.1,
  yAxis: 1,
  xAxis: 1
}

Highcharts.chart('container', {
  title: {
    text: 'Combination chart'
  },
  xAxis: [{
    categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
  }, {
    categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'],
    visible: false
  }],
  yAxis: [{

  }, {
    top: 30,
    height: 150,
    visible: false,
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
      }
    }
  }],
  labels: {
    items: [{
      html: 'Total fruit consumption',
      style: {
        left: '20px',
        top: '-20px',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
      }
    }]
  },
  series: [{
    type: 'column',
    name: 'Jane',
    data: [3, 2, 1, 3, 4]
  }, {
    type: 'column',
    name: 'John',
    data: [2, 3, 5, 7, 6]
  }, {
    type: 'column',
    name: 'Joe',
    data: [4, 3, 3, 9, 0]
  }, {
    type: 'spline',
    name: 'Average',
    data: [3, 2.67, 3, 6.33, 3.33],
    marker: {
      lineWidth: 2,
      lineColor: Highcharts.getOptions().colors[3],
      fillColor: 'white'
    }
  }, Highcharts.merge(defaultColumnSeries, {
  	data: [4, 3, 2, 6, 3, null, null, null, null, null, null, null, null, null, null, null]
  }), Highcharts.merge(defaultColumnSeries, {
  	data: [1, 4, 7, 3, 2, null, null, null, null, null, null, null, null, null, null, null]
  }), Highcharts.merge(defaultColumnSeries, {
  	data: [5, 2, 1, 3, 4, null, null, null, null, null, null, null, null, null, null, null]
  })]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Demo:

Upvotes: 0

Related Questions