You must be logged in to post your query.
Home › Forums › Chart Support › How to disable one line in a multiline line chart
Tagged: linechart
Hello, I’ve looked all over for how to do this and can’t find an answer, I was hoping someone could help! :)
I have a multiline line chart, and I want to disable one line until someone clicks on the line in the legend.
To explain in more detail, let’s say I have a 10 line linechart. I was to make one line hidden until someone clicks on the name in the legend and then it will show the line in the chart then. So when someone first goes to the chart, they see 9 lines showing and 10 names in the legend. They can click the name in the legend to make it show.
Thanks!
I’m so dumb, I figured it out. To do this, just set the visibility to false for the line you want hidden, like this:
visible: false,
Then, setup a click event handler so you can turn the line ‘on’ when it’s clicked in the legend.
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(); } },
References: https://canvasjs.com/docs/charts/chart-options/data/visible/ https://canvasjs.com/docs/charts/how-to/hide-unhide-data-series-chart-legend-click/
You must be logged in to reply to this topic. Login/Register