How to disable one line in a multiline line chart

[davidr]

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!

[davidr]

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/

• This reply was modified 7 years, 10 months ago by davidr.
• This reply was modified 7 years, 10 months ago by davidr.