CanvasJS supports setting the visibility of a specific data series in chart using its “visible” property. By combining this with the legend events we can create charts that toggle data series visibility on click of corresponding legend items.
Create a simple data series chart as explained here : Basics of creating a HTML5 multiple data series Chart
Here, i’ve created a simple 3 series chart.
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Simple Multi-Series Line Chart"
},
data: [
{
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}
]
},
{
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}
]
},
{
type: "line",
dataPoints: [
{ x: 10, y: 25 },
{ x: 20, y: 30},
{ x: 30, y: 20 },
{ x: 40, y: 45 },
{ x: 50, y: 30 },
{ x: 60, y: 10 },
{ x: 70, y: 15 },
{ x: 80, y: 18 },
{ x: 90, y: 20}
]
}
]
});
chart.render();
Set the showInLegend property to true (showInLegend : true) for every data series that you want to be displayed inside the legend.
Attach an event handler to the legend – we are going to hide/unhide data series inside the event handler. Also change the mouse cursor of legend to “pointer” so that user knows that its clickable.
legend: {
cursor: "pointer",
itemclick: function (e) {
//console.log("legend click: " + e.dataPointIndex);
//console.log(e);
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
}
In the first line we’re setting up cursor attribute to “pointer” which changes the mouse pointer to “hand” while hovering the legend items.
In the second line, we’re setting up the item click attribute, which actually toggles the visibility of the specific data series clicked inside the legend, and updates the state by redrawing the chart.
And the final compilation looks like… (You can try clicking on the legend items)
Comments 7
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix
Would be nice to have a “hide all” button. If you have many dataseries it would make it easy to just show one.
Did u get any solution..?? I have also the save problem…
You can do so easily via a custom Hide All button on click of which visible property of all dataSeries is set to false.
Set the showInLegend property to false (showInLegend : false) for second, or third data series and try to click on the legend items! Only first item in legend hides/shows the corresponded line!
If you have more then one chart on same page you should use e.chart.render(); instead of chart.render(); in legend.itemclick function.
How could you set it up so that when you click on one of the legend items, two of the dataSeries are made visible or invisible?
You can get reference to dataSeries via the chart object like e.chart.options.data[0], e.chart.options.data[1], etc…. Inside itemclick event handler you can set visibility of dataSeries as required.