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 area chart type

    var chart = anychart.area();

​

    // create a series with the mapped active data

    var actSeries = chart.splineArea(activeData);

​

    // create series with the mapped recovered data

    var recSeries = chart.splineArea(recoveredData);

​

    // create series with the mapped deaths data

    var deathsSeries = chart.splineArea(deathsData);

​

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

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

​

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

  });

});