html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

    var rawData = [

        ['x', 'Coal', 'Natural Gas', 'Nuclear', 'Hydroelectric'],

        [1990, 2500, 1000, 1500, 1000],

        [1991, 2520, 1150, 1550, 1100],

        [1992, 2530, 1100, 1540, 1100],

        [1993, 2540, 1100, 1530, 1000],

        [1994, 2500, 1150, 1500, 1050],

        [1995, 2300, 1200, 1600, 1060],

        [1996, 2250, 1250, 1650, 1070],

        [1997, 2200, 1200, 1600, 1080],

        [1998, 2150, 1200, 1500, 1050],

        [1999, 2100, 1250, 1500, 1010],

        [2000, 2100, 1250, 1650, 1100],

        [2001, 2100, 1300, 1600, 1090],

        [2002, 2100, 1350, 1650, 1050],

        [2003, 2100, 1300, 1670, 1040],

        [2004, 2150, 1300, 1680, 1070],

        [2005, 2200, 1500, 1700, 1030],

        [2006, 2150, 1500, 1710, 1030],

        [2007, 2100, 1600, 1710, 1020],

        [2008, 1700, 1700, 1850, 1010],

        [2009, 1750, 1700, 1800, 1000],

        [2010, 1700, 1750, 1800, 1000],

        [2011, 1650, 1700, 1850, 1010],

        [2012, 1600, 1750, 1850, 1020],

        [2013, 1600, 2000, 1750, 1040],

        [2014, 1500, 2100, 1700, 1050],

        [2015, 1509, 2050, 1700, 1030],

        [2016, 1520, 2000, 1650, 1020],

        [2017, 1510, 2050, 1650, 1010],

        [2018, 1430, 2100, 1600, 1020]

    ];

​

    var seriesNames = rawData[0].slice(1);

    var seriesDatum = preprocessData(rawData);

​

    // create and setup chart

    chart = anychart.area();

    chart.palette(['#67614c', '#e49333', '#9e70c2', '#7ee3e9']);

    // adjust scales

    chart.xScale().mode('continuous');

    chart.yScale().minimum(0);

    chart.yScale().maximum(100);

    chart.yAxis().labels().format('{%value}%');

    chart.tooltip(false);

    chart.legend(true);

​

    // create and setup series

    var series;

    for (var i = 0; i < seriesDatum.length; i++) {

      series = chart.rangeSplineArea(seriesDatum[i]);

      series.stroke('none');

      series.name(seriesNames[i]);

      series.hovered().markers(false);

      series.selected().markers(false);

    }

​

    // draw chart to container

    chart.container('container').draw();

});

​

function descSort(a, b) {

  return b.value - a.value;

}

​

function sum(arr) {

  var sum = 0;

  for (var i = 1; i < arr.length; i++) {

    sum += arr[i];

  }

  return sum;

}

​

var defaultLabelConfig = {

  enabled: true,

  fontColor: 'black',

  format: '{%value}{decimalsCount:2}%'

}

​

function setLabelConfig(seriesDatum, values, rowIndex, anchor) {

  for (var j = 0; j < values.length; j++) {

    originalIndex = values[j].index;

    seriesDatum[originalIndex][rowIndex]['label'] = {

      ...defaultLabelConfig, anchor

    };

  }

}

​

function preprocessData(rawData) {

  var x, row, high, low, point;

  var valuesSum;

  var seriesDatum = [];

  var i, j;

  for (i = 1; i < rawData.length; i++) {

    row = rawData[i];

    var valuesSum = sum(row);

    x = row[0];

    // convert values to object with value and index, to save original index.

    var values = row.slice(1).map((value, index) => ({value, index}));

​

    // here we have sorted array, and know original indexes.

    values.sort(descSort);

    high = 100;

​

    var originalIndex;

    for (j = 0; j < values.length; j++) {

      var valueObj = values[j];

      var value = valueObj.value;

      originalIndex = valueObj.index;

      // JS mathematics sometimes calculate low value lower than zero

      low = Math.max(0, high - 100 * value / valuesSum);

      point = { x, high, low };

      high = low;

      seriesDatum[originalIndex] ? seriesDatum[originalIndex][i - 1] = point : seriesDatum[originalIndex] = [point];

    }

    if (i === 1) {

      setLabelConfig(seriesDatum, values, 0, 'left-top')

    }

    if (i === rawData.length - 1) {

      setLabelConfig(seriesDatum, values, i - 1, 'right-top');

    }

  }

  return seriesDatum;

}