JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.2.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
JavaScript
$(function () {
var limit = 50;
//var limit = 100;
var x=0;
var y=0;
var z=0;
var dataSeries=[];
var dataSeries2=[];
var dataSeries3=[];
var time = new Date();
time = time.getTime();
for(var i=0;i<limit;i++){
x += (Math.random() *10 -5);
y += (Math.random() *10 -5);
z += (Math.random() *10 -5);
dataSeries.push({
x: new Date(time - i*1000*60),
y: x
});
dataSeries2.push({
x: new Date(time - i*1000*60),
y: y
});
dataSeries3.push({
x: new Date(time - i*1000*60),
y: z
});
}
$("#chartContainer").CanvasJSChart(
{
animationEnabled: true,
theme: "theme2",
title:{
text: "Multi Series Spline Chart - Hide / Unhide via Legend"
},
axisX: {
intervalType: "day",
valueFormatString: "MMM DD| h TT",
//labelAngle: -20
},
axisY:{
lineColor: "#4F81BC",
tickColor: "#4F81BC",
labelFontColor: "#4F81BC",
titleFontColor: "#4F81BC",
lineThickness: 2,
},
data: [
{
type: "spline", //change type to bar, line, area, pie, etc
showInLegend: true,
dataPoints: dataSeries
},{
type: "spline",
showInLegend: true,
dataPoints: dataSeries3
},
{
type: "line",
showInLegend: true,
dataPoints: dataSeries2
}
],
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
$("#chartContainer").CanvasJSChart().render();
}
}
});
})