html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create data set on our data

  var dataSet = anychart.data.set([

    ['Jan-2022', 5250, 5250, 0],

    ['Feb-2022', 7125, 1875, 0],

    ['Mar-2022', 25993, 5850, 13018],

    ['Apr-2022', 30755.5, 1500, 3262.5],

    ['May-2022', 35818.5, 0, 5063],

    ['Jun-2022', 49693.5, 3750, 10125],

    ['Jul-2022', 51568.5, 1875, 0],

    ['Aug-2022', 63880, 0, 12311.5],

    ['Sep-2022', 73286, 3750, 5656],

    ['Oct-2022', 81911, 3975, 4650],

    ['Nov-2022', 93161, 3750, 7500],

    ['Dec-2022', 98828, 1500, 4167]

  ]);

​

  // map data for the first series, take x from the zero column and value from the first column of data set

  var firstSeriesData = dataSet.mapAs({ x: 0, value: 1 });

​

  // map data for the second series, take x from the zero column and value from the second column of data set

  var secondSeriesData = dataSet.mapAs({ x: 0, value: 2 });

​

  // map data for the third series, take x from the zero column and value from the third column of data set

  var thirdSeriesData = dataSet.mapAs({ x: 0, value: 3 });

​

  // map data for the fourth series, take x from the zero column and value from the fourth column of data set

  var fourthSeriesData = dataSet.mapAs({ x: 0, value: 4 });

​

  // create column chart

  var chart = anychart.column();

  // turn on chart animation

  chart.animation(true);

​

  // set chart title text settings

  chart.title(

    'Combination of Stacked Column and Line Chart (Dual Y-Axis)'

  );

​

  // force chart scale to stuck series values

  chart.yScale().stackMode('value');

​

  // create scale for line series and extraYAxis

  // it force line series to not stuck with over series

  var scale = anychart.scales.linear();

  scale.minimum(0).maximum(100000).ticks({ interval: 20 });

​

  // create extra axis on the right side of chart

  // and set scale for it

  var extraYAxis = chart.yAxis(1);

  extraYAxis.orientation('right').scale(scale);

  extraYAxis.labels().padding(0, 0, 0, 5);

​

  // setup axis to append '%' symbol to label values

  //extraYAxis.labels().format('{%Value}%');

​

  // create second series with mapped data

  chart.column(secondSeriesData).name("Experience Cost Savings").color("Green");

​

  chart.crosshair(true);

​

  // create line series and set scale for it

  var lineSeries = chart.line(firstSeriesData).name("Incremental Cost Savings").color("#f1c232");

  lineSeries.yScale(scale).markers(true);

​

  // create third series with mapped data

  chart.column(thirdSeriesData).name("Fulfilment Cost Savings").color("#0080ff");

​

  // create fourth series with mapped data

  //chart.column(fourthSeriesData);

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

​

  var legend = chart.legend();

  legend.enabled(true);

  legend.position('center');

  legend.itemsLayout('horizontal');

  //var labels = chart.labels();

  //labels.enabled(true);

  //labels.color("#000000");

});