COVID-19 in Italy

Select a theme:

                     <html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>

  <div id="container"></div>


  <script>

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

</script>
</body>
</html>

This is an interactive JS percent stacked area chart visualizing the amount of active cases, recoveries, and deaths from COVID-19 among all infected in Italy. Loads data from CSV. Features custom colors, labels, markers, and tooltip.

Check out how this JavaScript chart was built step-by-step in this Stacked Area Chart Tutorial.

Warning!

COVID-19 in Italy

COVID-19 in Italy