Toggle visibility of other Angular Charts using legend click

2 mins read

This article describes how to change the visibility of other Angular Charts based on one chart by using the legenClick event.

Implementation Details

In charting, a legend helps identify the data series represented by specific colors, symbols, or lines. By using the legendClick event, you can toggle the visibility of corresponding series in other charts based on the clicked legend item.

When a legend item is clicked, you can retrieve the series index of the clicked item using the series.index property from the event arguments. This index can then be used to locate and change the visibility of the corresponding series in other charts.

The legendClick event provides access to several useful arguments, including:

cancel
chart
legendShape
legendText
name
points
series

You can control the visibility of a series using its visible property.

Code Snippet

The following example demonstrates how to implement this functionality across three Angular charts using custom event handlers: legendClick, legendClick1, and legendClick2.

public legendClick(args: ILegendClickEventArgs): void{
      this.index = args.series.index;
      let visibility1 = this.chart1.series[this.index].visible;
      let visibility2 = this.chart2.series[this.index].visible;
      this.chart1.series[this.index].visible = visibility1 ? false : true;
      this.chart2.series[this.index].visible = visibility2 ? false : true;
      this.chart1.refresh();
      this.chart2.refresh();
   }
   public legendClick1(args: ILegendClickEventArgs): void{
       this.index = args.series.index;
       let visibility = this.chart.series[this.index].visible;
       let visibility2 = this.chart2.series[this.index].visible;
       this.chart.series[this.index].visible = visibility ? false : true;
       this.chart2.series[this.index].visible = visibility2 ? false : true;
       this.chart.refresh();
       this.chart2.refresh();
    }
    public legendClick2(args: ILegendClickEventArgs): void{
       this.index = args.series.index;
       let visibility = this.chart.series[this.index].visible;
       let visibility1 = this.chart1.series[this.index].visible;
       this.chart.series[this.index].visible = visibility ? false : true;
       this.chart1.series[this.index].visible = visibility1 ? false : true;
       this.chart.refresh();
       this.chart1.refresh();
    }