html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadCsvFile(

    'https://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv',

    function (data) {

      // set the data and ignore the first row that contains headers

      var dataSet = anychart.data.set(data, {ignoreFirstRow: true});

​

      // map data for the deaths series

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

​

      // map data for the recovered series

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

​

      // map data for the active series

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

​

      // specify the chart type

      var chart = anychart.area();

​

      // helper function to setup series and give them appropriate names in order to distinguish and label them properly

      var setupSeries = function (series, name) {

        series.name(name);

        // setting the markers

        series.hovered().stroke('3 #fff 1');

        series.hovered().markers()

          .enabled(true)

          .type('circle')

          .size(4)

          .stroke('1.5 #fff');

        series.markers().zIndex(100);

      };

​

      // create a series with the mapped active data

      var actSeries = chart.splineArea(activeData)

        .fill('#1E8FCD')

        .stroke('#4b9bc6');

      setupSeries(actSeries, 'Active');

​

      // create a series with the mapped recovered data

      var recSeries = chart.splineArea(recoveredData)

        .fill('#B3C67D')

        .stroke('#b9c1a0');

      setupSeries(recSeries, 'Recovered');

​

      // create a series with the mapped deaths data

      var deathsSeries = chart.splineArea(deathsData)

        .fill('#b3315d')

        .stroke('#b5617d');

      setupSeries(deathsSeries, 'Deaths');

​

      // force the chart to stack values by the y scale

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

​

      // set the chart title

      chart.title('Covid-19 in Italy');

​

      // set the labels of the axes

      chart.xAxis().title('Date');

      chart.yAxis().title('Number of people');

​

      // turn on the crosshair

      var crosshair = chart.crosshair();

      crosshair.enabled(true)

        .yStroke(null)

        .xStroke('#fff')

        .zIndex(39);

      crosshair.yLabel().enabled(false);

​

      // turn on the legend

      chart.legend(true);

​

      // turn on the chart animation

      chart.animation(true);

​

      // set the container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

    });

});