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();

  });

});