How to Toggle Visibility of Other Angular Charts Using Legend Click?

This article explains how to change the visibility of other Angular Charts based on one chart by using the legendClick 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();
    }

Demo

The following animation illustrates how the legend click toggles visibility in the associated charts:

Live Sample

View Sample in Stackblitz

Conclusion

We hope you enjoyed learning about how to implement full screen mode in Angular Image Editor.

You can refer to our Angular Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!