The legend labels are not in the DOM when using time series data. I have around 1500 data points. Here is reduced it to 3 because it seems like the amount of data points is not the cause of the issue.
Is this a bug or did I misconfigure something?
I also tried using a separate div for the legend (like described here but it seems to have no effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AmCharts</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="http://cdn.date-fns.org/v2.0.0-alpha0/date_fns.min.js"></script>
<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>
<style>
html, body {
font-size: 16px;
}
#chartdiv,
#legenddiv {
width: 100%;
height: 500px;
border: 1px dotted #c99;
margin: 1em 0;
}
#legenddiv {
height: 150px;
}
</style>
</head>
<body>
<div id="chartdiv"></div>
Legend:
<div id="legenddiv"></div>
<script src="./main.js"></script>
</body>
</html>
am4core.ready(function () {
am4core.useTheme(am4themes_animated); // theming
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
"date": 1574861644000,
"value": 13505
},
{
"date": 1574861645000,
"value": 13505
},
{
"date": 1574861645000,
"value": 13492
}];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.baseInterval = { timeUnit: "second", count: 1 };
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}";
series.tooltip.pointerOrientation = "vertical";
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = dateAxis;
// create a legend for the sensors
chart.legend = new am4charts.Legend();
let legendContainer = am4core.create("legenddiv", am4core.Container);
legendContainer.width = am4core.percent(100);
legendContainer.height = am4core.percent(100);
chart.legend.parent = legendContainer;
}); // end am4core.ready()
By default the legend will look at the series'
nameproperty to use as the legend label as documented here. Adding this to your series will fix the problem, e.g.series.name = "Series #1"