Highlighting line chart series on legend hover

by amcharts

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
  max-width: 100%;
}

JavaScript

am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.XYChart);
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

chart.data = [
  {
    date: new Date(2020, 0, 1),
    value1: 2,
    value2: 8
  },
  {
    date: new Date(2020, 0, 2),
    value1: 4,
    value2: 10
  },
];

// Normal creation
const instantSeries = chart.series.push(new am4charts.LineSeries());
instantSeries.dataFields.valueY = "value1";
instantSeries.dataFields.dateX = "date";
instantSeries.bullets.push(new am4charts.CircleBullet());

// Delayed creation
const defferSeries = chart.series.push(new am4charts.LineSeries());
defferSeries.dataFields.valueY = "value2";
defferSeries.dataFields.dateX = "date";

let delay = 3000; // Not work
//delay = 0; // Work
setTimeout(() => {
  defferSeries.bullets.push(new am4charts.CircleBullet());
  defferSeries.invalidate();
}, delay);