With the code below, the browser tab hangs, circling indefinitely.
The issue appears to be the rendering of two data-points that are very close apart
series1:
dataPoints: [
{ x: 3.001084, y: 235 },
]
series2:
dataPoints: [
{ x: 2.991214, y: 234 },
]
If I move the data points x of the series by 1 (increase or decrease), it works fine.. Looks like a bug?
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
zoomEnabled: true,
theme: "light2",
title:{
text: 'Line chart that hangs',
},
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
},
axisX: {
title: 'Time (secs)',
},
axisY:{
title: 'Size (Bytes)',
includeZero: false
},
data: [
{
type: "line",
name: "144.0.0.2:49802",
showInLegend: true,
dataPoints: [
{ x: 3.001084, y: 235 },
]
},
{
type: "line",
name: "144.0.0.2:49804",
showInLegend: true,
dataPoints: [
{ x: 2.991214, y: 234 },
]
},
]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>