Home forums Using CanvasJS How to disable one line in a multiline line chart

Tagged: 

This topic contains 1 reply, has 1 voice, and was last updated by  davidr 1 month, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #14150

    davidr
    Member

    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!

    #14154

    davidr
    Member

    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:

    visible

    Hide Unhide Data Series on Legend Click

    • This reply was modified 1 month, 3 weeks ago by  davidr.
    • This reply was modified 1 month, 3 weeks ago by  davidr.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.