Stacked column bar with line

Is it possible to show stacked col with 2 line graph? While interacting with the combination of stacked column and line graphs, is it possible to show the change in each line graph, as we hide couple of elements(scale) from stacked column?

for more context please view this link might help you understand Thanks for the help

I tried looking for the example of such case but everywhere it only shows change in stacked column while line graph remains as it is

Solution

To create a chart with stacked columns and two lines, define a proper amount of series and set stacking for column ones. For example:

Highcharts.chart('container', {
  plotOptions: {
    column: {
      stacking: 'normal'
    }
  },
  series: [{
    type: 'line',
    data: [...]
  }, {
    type: 'line',
    data: [...]
  }, {
    type: 'column',
    data: [...]
  }, {
    type: 'column',
    data: [...]
  }, ...]
});

Live example: http://jsfiddle.net/BlackLabel/jL0sq2vo/

Docs: https://www.highcharts.com/docs/chart-concepts/series

I don't know how the line series are connected to the column ones in your case, but basically you can use show / hide series events to apply changes to line series data. For example:

  plotOptions: {
    column: {
      stacking: 'normal',
      events: {
        show: function() {
          const series = this.chart.series;

          baseLine1 = baseLine1.map(el => el + 1);
          baseLine2 = baseLine2.map(el => el + 1);

          series[0].setData(baseLine1, false);
          series[1].setData(baseLine2);
        },
        ...
      }
    }
  }

Live example: http://jsfiddle.net/BlackLabel/rg4mdaov/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData