New to Telerik UI for WinForms? Download free 30-day trial

Hide/Show a Chart Series by Clicking a Legend Item

Environment

Product Version Product Author
2019.1.219 RadChartView for WinForms Desislava Yordanova

Description

This article aims to show you a sample approach how to hide/show a chart series by clicking its legend item.

hide-chart-seriess001

Solution

It is necessary to handle the Click event of each LegendItemElement and manipulate the visibility of the associated chart series. Handling the MouseEnter event of RadChartView and setting the ItemCapture to null ensures that the chart is focused as soon as you move the mouse cursor over the chart:

Hide/Show chart series from legend items


        public RadForm1()
        {
            InitializeComponent();

            LineSeries lineSeries = new LineSeries();
            lineSeries.LegendTitle = "First";
            lineSeries.DataPoints.Add(new CategoricalDataPoint(20, "Jan"));
            lineSeries.DataPoints.Add(new CategoricalDataPoint(22, "Apr"));
            lineSeries.DataPoints.Add(new CategoricalDataPoint(12, "Jul"));
            lineSeries.DataPoints.Add(new CategoricalDataPoint(19, "Oct"));
            this.radChartView1.Series.Add(lineSeries);
            LineSeries lineSeries2 = new LineSeries();
            lineSeries2.LegendTitle = "Second";
            lineSeries2.DataPoints.Add(new CategoricalDataPoint(18, "Jan"));
            lineSeries2.DataPoints.Add(new CategoricalDataPoint(15, "Apr"));
            lineSeries2.DataPoints.Add(new CategoricalDataPoint(17, "Jul"));
            lineSeries2.DataPoints.Add(new CategoricalDataPoint(22, "Oct"));
            this.radChartView1.Series.Add(lineSeries2);

            this.radChartView1.ShowLegend = true;

            foreach (LegendItemElement item in this.radChartView1.ChartElement.LegendElement.StackElement.Children)
            {
                item.TitleElement.Click += TitleElement_Click;
            }
            this.radChartView1.MouseEnter += radChartView1_MouseEnter;
        }

        private void radChartView1_MouseEnter(object sender, EventArgs e)
        {
            this.radChartView1.Behavior.ItemCapture = null;
        }

        private void TitleElement_Click(object sender, EventArgs e)
        {
            LegendItemTitle title = sender as LegendItemTitle;
            LegendItemElement itemElement = title.Parent as LegendItemElement;
            itemElement.LegendItem.Element.IsVisible = !itemElement.LegendItem.Element.IsVisible;
            if (!itemElement.LegendItem.Element.IsVisible)
            {
                title.Opacity = 0.5;
            }
            else
            {
                title.Opacity = 1;
            }
        }

In this article