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

• Nov 13, 2018
• 4 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.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-custom-legend-radio-buttons-to-control-visibility-of-a-chart-series-e4951

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);
                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) {
                    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 Microsoft.VisualBasic
Imports System
Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Windows.Forms
Imports DevExpress.XtraCharts

Namespace CustomCheckboxesInLegendViewAndBehavior
    Partial Public Class mainForm
        Inherits Form
        Private Const LegendRadioSide As Integer = 17
        Private Const LegendRadioInnerPointBoundsSide As Integer = 8
        Private Const LegendRadioWidth As Single = 1.5F
        Private initializationFlag As Boolean = False

        Public Sub New()
            InitializeComponent()
            initializationFlag = True
            chartControl.BeginInit()
            chartControl.Legend.UseCheckBoxes = True
            AddHandler chartControl.CustomDrawSeries, AddressOf OnCustomDrawSeries
            AddHandler chartControl.LegendItemChecked, AddressOf OnLegendItemChecked
            chartControl.Series("Point").CheckedInLegend = True
            chartControl.Series("Line").CheckedInLegend = False
            chartControl.Series("Area").CheckedInLegend = False
            chartControl.EndInit()
            initializationFlag = False
        End Sub

        Private Sub OnLegendItemChecked(ByVal sender As Object, ByVal e As LegendItemCheckedEventArgs)
            If initializationFlag = True Then
                Return
            End If
            initializationFlag = True
            Dim checkedSeries As Series = TryCast(e.CheckedElement, Series)
            If checkedSeries Is Nothing Then
                Throw New Exception("Expected series only")
            End If
            For Each series As Series In chartControl.Series
                series.CheckedInLegend = False
            Next series
            checkedSeries.CheckedInLegend = True
            chartControl.Titles(0).Text = checkedSeries.Name
            initializationFlag = False
        End Sub

        Private Sub OnCustomDrawSeries(ByVal sender As Object, ByVal e As CustomDrawSeriesEventArgs)
            Dim bitmap As New Bitmap(LegendRadioSide, LegendRadioSide)
            Using graphics As Graphics = graphics.FromImage(bitmap)
                graphics.SmoothingMode = SmoothingMode.HighQuality
                Dim seriesColor As Color = GetSeriesColor(e.Series, chartControl)
                Dim radioPen As New Pen(seriesColor, LegendRadioWidth)
                Dim radioRadius As Integer = LegendRadioSide - 3
                Dim radioRectangle As New Rectangle(1, 1, radioRadius, radioRadius)
                graphics.DrawEllipse(radioPen, radioRectangle)
                If e.Series.CheckedInLegend Then
                    Dim brush As Brush = New SolidBrush(seriesColor)
                    Dim coord As Integer = (LegendRadioSide - LegendRadioInnerPointBoundsSide) / 2
                    Dim filledEllipseBounds As New Rectangle(coord, coord, LegendRadioInnerPointBoundsSide, LegendRadioInnerPointBoundsSide)
                    graphics.FillEllipse(brush, filledEllipseBounds)
                End If
            End Using
            e.DisposeLegendMarkerImage = True
            e.LegendMarkerImage = bitmap
        End Sub
        Private Function GetSeriesColor(ByVal series As Series, ByVal chartControlDistributions As ChartControl) As Color
            Dim seriesIndex As Integer = chartControlDistributions.Series.IndexOf(series)
            Dim paletteName As String = chartControlDistributions.PaletteName
            Dim currentPalette As Palette = chartControlDistributions.PaletteRepository(paletteName)
            Dim paletteEntryAccordingToSeries As PaletteEntry = currentPalette(seriesIndex)
            Dim result As Color = paletteEntryAccordingToSeries.Color
            Return result
        End Function
    End Class
End Namespace