Showing only one dataSeries on legend item click - CanvasJS JavaScript Charts
Showing only one dataSeries on legend item click - CanvasJS JavaScript Charts
by canvasjs
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Click on legend to show corrosponding dataseries"
},
legend: {
cursor: "pointer",
itemclick: function (e) {
//console.log("legend click: " + e.dataPointIndex);
//console.log(e);
var data = e.chart.options.data;
for(var i = 0; i < data.length; i++){
data[i].visible = false;
}
e.dataSeries.visible = true;
e.chart.render();
}
},
data: [{
showInLegend: true,
//visible: false,
type: "line",
dataPoints: [{
x: 10,
y: 5
}, {
x: 20,
y: 9
}, {
x: 30,
y: 17
}, {
x: 40,
y: 32
}, {
x: 50,
y: 22
}, {
x: 60,
y: 14
}, {
x: 70,
y: 25
}, {
x: 80,
y: 18
}, {
x: 90,
y: 20
}
]
}, {
showInLegend: true,
visible: false,
type: "line",
dataPoints: [{
x: 10,
y: 31
}, {
x: 20,
y: 35
}, {
x: 30,
y: 30
}, {
x: 40,
y: 35
}, {
x: 50,
y: 35
}, {
x: 60,
y: 38
}, {
x: 70,
y: 38
}, {
x: 80,
y: 34
}, {
x: 90,
y: 44
}
...