How to hide/unhide data series on click of legend items – in case of multi series chart

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.

Step1:

Create a simple data series chart as explained here : Basics of creating a HTML5 multiple data 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();

Step2:

Set the showInLegend property to true (showInLegend : true) for every data series that you want to be displayed inside the legend.

Step3:

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.

Step 4:

And the final compilation looks like… (You can try clicking on the legend items)

Try Editing The Code
If you have any questions, please feel free to ask in our forums.Ask Question

7 Comments

  1. Otto says:

    Would be nice to have a “hide all” button. If you have many dataseries it would make it easy to just show one.

  2. Michael says:

    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!

  3. Ionut V. says:

    If you have more then one chart on same page you should use e.chart.render(); instead of chart.render(); in legend.itemclick function.

  4. Trever says:

    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?

    • Sunil Urs says:

      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.

If you have any questions, please feel free to ask in our forums. Ask Question