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, 990],

    [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]

  ];

​

  // get preprocessed data

  var preprocessedData = preprocessData(rawData);

​

  // create chart

  var chart = anychart.area();

​

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

​

  // create and adjust series

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

    var series = chart.rangeSplineArea(preprocessedData[i]);

    series.name(rawData[0][i + 1]);

    series.hovered().markers(false);

    series.selected().markers(false);

​

    // add labels

    var leftValue = preprocessedData[i][0].high - preprocessedData[i][0].low;

    var leftLabel = {

      format: leftValue.toFixed(2) + '%',

      anchor: "left-top",

      fontColor: 'black'

    };

​

    var lastPointIndex = preprocessedData[i].length - 1;

    var rightValue = preprocessedData[i][lastPointIndex].high - preprocessedData[i][lastPointIndex].low;    

    var rightLabel = {

      format: rightValue.toFixed(2) + '%',

      anchor: "right-top",

      fontColor: 'black'

    };

​

    series.getPoint(0).set("label", leftLabel);

    series.getPoint(lastPointIndex).set("label", rightLabel);    

  }

​

  // adjust scales

  chart.yScale().minimum(0);

  chart.yScale().maximum(100);

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

​

  // adjust UI elements

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

  chart.tooltip(false);

  chart.legend(true);

​

  // render the chart

  chart.container("container").draw();

});

​

function preprocessData(rawData) {

  var seriesCount = rawData[0].length - 1;

  var tempArr = [];

  var finalArr = [];

  //create datasets for all series

  for (var i = 0; i < seriesCount; i++) {

    finalArr.push([]);

  }

​

  // calculate range value in percents for every point

  // go through years

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

    var totalValue = 0;

    tempArr.push([])

    // go through series to calculate total value

    for (var k = 1; k <= seriesCount; k++) {

      totalValue += rawData[i][k];

    }

    // go throug series to create dataSet with percent ranges

    for (k = 1; k <= seriesCount; k++) {

      var percentValue = rawData[i][k] * 100 / totalValue;

      tempArr[i-1].push(percentValue);

    }

  }

​

  // calculate high/low and sort them

  // go through years

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

    var previousLow = 100;

    // go through series

    for (k = 0; k < seriesCount; k++) {

      //find max value among series

      var currentMax = Math.max.apply(null, tempArr[i]);

      //find the series index which value is considered as current max for this year

      var currentIndex = tempArr[i].indexOf(currentMax);

      // drop this value to 0 to not take it into account later

      tempArr[i][currentIndex] = 0;

      // create point for the series with the current max value for the current year

      // previousLow is requred to calculate value offset for the next series

      var point = {

        x: rawData[i + 1][0],

        high: previousLow.toFixed(2),

        low: (previousLow - currentMax).toFixed(2)

      };

      previousLow -= currentMax;

      // add the point to the series data set

      finalArr[currentIndex].push(point);

    }

  }

  return finalArr;

}

​

​

​

​

​