<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

<div id="container"></div>
<pre id="csv" style="display:none">
month,1980,1990,2000,2010,2012,2020
Jan,14.86,14.78,14.22,13.74,13.73,13.65
Feb,15.96,15.58,15.14,14.58,14.55,14.69
Mar,16.04,15.87,15.22,15.14,15.20,14.78
Apr,15.43,14.65,14.56,14.66,14.63,13.73
May,13.79,13.23,13.15,12.87,13.01,12.36
Jun,12.20,11.64,11.67,10.59,10.67,10.58
Jul,10.10,9.25,9.51,8.07,7.67,7.28
Aug,7.98,6.80,7.17,5.87,4.72,5.08
Sep,7.67,6.14,6.25,4.87,3.57,3.92
Oct,9.18,8.48,8.38,6.98,5.89,5.28
Nov,11.38,11.08,10.32,9.61,9.39,8.99
Dec,13.59,13.11,12.64,11.83,12.01,11.77</pre>

.highcharts-figure,
.highcharts-data-table table {
  min-width: 360px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}
.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

let period = 1000; //1sec

Highcharts.chart("container", {
  chart: {
    type: "spline",
    backgroundColor:"#fceee4"
  },

  title: {
    text: "The Arctic Sea Ice extent from 1980 to 2020"
  },

  subtitle: {
    text: "Source: National Snow and Ice Data Center"
  },

  xAxis: {
    crosshair: {
      width: 2
    }
  },

  yAxis: {
    title: {
      text: "Million of square kilometers"
    }
  },

  plotOptions: {
    series: {
      color: "#ABB2B9",
      marker: {
        enabled: false
      },
      label: {
        connectorAllowed: false
      },
      animation:{
        duration:1200
      }
    }
  },

  data: {
    csv: document.getElementById("csv").innerHTML
  },

  tooltip: {
    shared: true,
    valueSuffix: " million ㎢"
  },

  series: [
    {      
      animation: {
        defer: period*0
      }
    },
    {      
      animation: {
        defer: period
      }
    },
    {
      animation: {
        defer: period * 2
      }
    },
    {
      animation: {
        defer: period * 3
      }
    },
    {
      color: "#E74C3C",
      animation: {
        defer: period * 4
      }
    },
    {
      color: "#3498DB",
      animation: {
        defer: period * 5
      }
    }
  ]
});