How to: Create Custom Legend Radio Buttons to Control Visibility of a Chart Series

• Nov 13, 2018
• 3 minutes to read

This example demonstrates how to show a series (Point, Line or Area), depending on the selection state of a custom radio button in the chart legend.

To accomplish this task, do the following:

Use the ChartControl.CustomDrawSeries (WebChartControl.CustomDrawSeries) event handler to create a custom appearance for radio buttons based on the color of a selected series.

To provide the capability for custom radio buttons to show (or hide) the series, use the LegendItemCheckedEventArgs.CheckedElement and SeriesBase.CheckedInLegend properties in the ChartControl.LegendItemChecked (WebChartControl.LegendItemChecked) event.

View Example

MainForm.cs

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
using DevExpress.XtraCharts;

namespace CustomCheckboxesInLegendViewAndBehavior {
    public partial class mainForm : Form {
        const int LegendRadioSide = 17;
        const int LegendRadioInnerPointBoundsSide = 8;
        const float LegendRadioWidth = 1.5f;
        bool initializationFlag = false;

        public mainForm() {
            InitializeComponent();
            chartControl.BeginInit();
            {
                chartControl.LegendItemChecked += OnLegendItemChecked;
                chartControl.CustomDrawSeries += OnCustomDrawSeries;
                chartControl.Legend.UseCheckBoxes = true;
                chartControl.Series["Point"].CheckedInLegend = false;
                chartControl.Series["Line"].CheckedInLegend = true;
                chartControl.Series["Area"].CheckedInLegend = false;
            }
            chartControl.EndInit();
            initializationFlag = false;
        }

        void OnLegendItemChecked(object sender, LegendItemCheckedEventArgs e) {
            if (initializationFlag == true)
                return;
            initializationFlag = true;
            {
                Series checkedSeries = e.CheckedElement as Series;
                if (checkedSeries == null)
                    throw new Exception("Expected series only");
                foreach (Series series in chartControl.Series)
                    series.CheckedInLegend = false;
                checkedSeries.CheckedInLegend = true;
                chartControl.Titles[0].Text = checkedSeries.Name;
            }
            initializationFlag = false;
        }

        void OnCustomDrawSeries(object sender, CustomDrawSeriesEventArgs e) {
            Bitmap bitmap = new Bitmap(LegendRadioSide, LegendRadioSide);
            using (Graphics graphics = Graphics.FromImage(bitmap)) {
                graphics.SmoothingMode = SmoothingMode.HighQuality;
                Color seriesColor = GetSeriesColor(e.Series, chartControl);
                using (Pen radioPen = new Pen(seriesColor, LegendRadioWidth)) {
                    int radioRadius = LegendRadioSide - 3;
                    Rectangle radioRectangle = new Rectangle(1, 1, radioRadius, radioRadius);
                    graphics.DrawEllipse(radioPen, radioRectangle);
                }
                if (e.Series.CheckedInLegend) {
                    using (Brush brush = new SolidBrush(seriesColor)) {
                        int coord = (LegendRadioSide - LegendRadioInnerPointBoundsSide) / 2;
                        Rectangle filledEllipseBounds = new Rectangle(coord, coord,
                              LegendRadioInnerPointBoundsSide, LegendRadioInnerPointBoundsSide);
                        graphics.FillEllipse(brush, filledEllipseBounds);
                    }
                }
            }
            e.DisposeLegendMarkerImage = true;
            e.LegendMarkerImage = bitmap;
        }

        Color GetSeriesColor(Series series, ChartControl chartControl) {
            int seriesIndex = chartControl.Series.IndexOf(series);
            string paletteName = chartControl.PaletteName;
            Palette currentPalette = chartControl.PaletteRepository[paletteName];
            PaletteEntry paletteEntryAccordingToSeries = currentPalette[seriesIndex];
            Color result = paletteEntryAccordingToSeries.Color;
            return result;
        }
    }
}

MainForm.vb

Imports System
Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Windows.Forms
Imports DevExpress.XtraCharts

Namespace CustomCheckboxesInLegendViewAndBehavior
    Public Partial Class mainForm
        Inherits Form

        Const LegendRadioSide = 17
        Const LegendRadioInnerPointBoundsSide = 8
        Const LegendRadioWidth = 1.5F
        Private initializationFlag = False

        Public Sub New()
            Me.InitializeComponent()
            Me.chartControl.BeginInit()

            If True Then
                AddHandler Me.chartControl.LegendItemChecked, AddressOf Me.OnLegendItemChecked
                AddHandler Me.chartControl.CustomDrawSeries, AddressOf Me.OnCustomDrawSeries
                Me.chartControl.Legend.UseCheckBoxes = True
                Me.chartControl.Series("Point").CheckedInLegend = False
                Me.chartControl.Series("Line").CheckedInLegend = True
                Me.chartControl.Series("Area").CheckedInLegend = False
            End If

            Me.chartControl.EndInit()
            initializationFlag = False
        End Sub

        Private Sub OnLegendItemChecked(ByVal sender As Object, ByVal e As LegendItemCheckedEventArgs)
            If initializationFlag = True Then Return
            initializationFlag = True

            If True Then
                Dim checkedSeries As Series = TryCast(e.CheckedElement, Series)
                If checkedSeries Is Nothing Then Throw New Exception("Expected series only")

                For Each series As Series In Me.chartControl.Series
                    series.CheckedInLegend = False
                Next

                checkedSeries.CheckedInLegend = True
                Me.chartControl.Titles(0).Text = checkedSeries.Name
            End If

            initializationFlag = False
        End Sub

        Private Sub OnCustomDrawSeries(ByVal sender As Object, ByVal e As CustomDrawSeriesEventArgs)
            Dim bitmap As Bitmap = New Bitmap(LegendRadioSide, LegendRadioSide)

            Using graphics = Graphics.FromImage(bitmap)
                graphics.SmoothingMode = SmoothingMode.HighQuality
                Dim seriesColor = Me.GetSeriesColor(e.Series, Me.chartControl)

                Using radioPen As Pen = New Pen(seriesColor, LegendRadioWidth)
                    Dim radioRadius = LegendRadioSide - 3
                    Dim radioRectangle As Rectangle = New Rectangle(1, 1, radioRadius, radioRadius)
                    graphics.DrawEllipse(radioPen, radioRectangle)
                End Using

                If e.Series.CheckedInLegend Then
                    Using brush As Brush = New SolidBrush(seriesColor)
                        Dim coord As Integer = (LegendRadioSide - LegendRadioInnerPointBoundsSide) / 2
                        Dim filledEllipseBounds As Rectangle = New Rectangle(coord, coord, LegendRadioInnerPointBoundsSide, LegendRadioInnerPointBoundsSide)
                        graphics.FillEllipse(brush, filledEllipseBounds)
                    End Using
                End If
            End Using

            e.DisposeLegendMarkerImage = True
            e.LegendMarkerImage = bitmap
        End Sub

        Private Function GetSeriesColor(ByVal series As Series, ByVal chartControl As ChartControl) As Color
            Dim seriesIndex = chartControl.Series.IndexOf(series)
            Dim paletteName = chartControl.PaletteName
            Dim currentPalette = chartControl.PaletteRepository(paletteName)
            Dim paletteEntryAccordingToSeries = currentPalette(seriesIndex)
            Dim result = paletteEntryAccordingToSeries.Color
            Return result
        End Function
    End Class
End Namespace