DxChartLegend Class

Defines a chart legend.

Assembly: DevExpress.Blazor.v25.1.dll

Declaration

public class DxChartLegend :
    DxComplexSettingsComponent<DxChartLegend, ChartLegendModel>,
    IModelProvider<ChartTitleModel>

Remarks

Use DxChartLegend objects to customize legend settings for the following components:

DxChart<T>: A control that visualizes bound data as graphs: bar, area, line, and others.
DxPieChart<T>: A control that visualizes data as Pie and Donut charts.
DxPolarChart<T>: A control that visualizes bound data as graphs in polar coordinates.

A chart component can display a legend - an explanatory component that helps you identify a series. The legend lists all series (for <DxChart> and <DxPolarChart>) or data points (for <DxPieChart>) as legend items. Each item consists of a marker and text that identify the associated series or data point.

Charts - Legend Customization

<DxChart Data="@DataSource">
    <DxChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024" />
    <DxChartLineSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                       ValueField="@((StatisticPoint v) => v.Population23)"
                       Name="2023" />
    <DxChartLegend Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right"
                   Position="RelativePosition.Outside"
                   AllowToggleSeries="true" />
</DxChart>

<DxPolarChart Data="@DataSource">
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population24)"
                           Name="2024" />
    <DxPolarChartLineSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                            ValueField="@((StatisticPoint v) => v.Population23)"
                            Name="2023" />
    <DxChartLegend Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right"
                   Position="RelativePosition.Outside"
                   AllowToggleSeries="true" />
</DxPolarChart>

<DxPieChart Data="@DataSource"
            Palette="@(new string[]{"#5f368d", "#28a745", "#00a9e6"})"
            PaletteExtensionMode="ChartPaletteExtensionMode.Blend">
    <DxPieChartSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024" />
    <DxChartLegend Orientation="Orientation.Vertical"
                   HorizontalAlignment="HorizontalAlignment.Right"
                   Position="RelativePosition.Outside"
                   AllowToggleSeries="true" />
</DxPieChart>

public static List<StatisticPoint> GenerateData() {
    return new List<StatisticPoint>() {
        new StatisticPoint("Germany", 84552242, 83294633),
        new StatisticPoint("UK", 69138192, 67736802),
        new StatisticPoint("France", 66548530, 64756584),
        new StatisticPoint("Italy", 59342867, 58870763),
        new StatisticPoint("Spain", 47910526, 47519628),
    };
}
public class StatisticPoint {
    public string Country { get; set; }
    public int Population24 { get; set; }
    public int Population23 { get; set; }
    public StatisticPoint(string country, int population24, int population23) {
        Country = country;
        Population24 = population24;
        Population23 = population23;
    }
}

Run Demo: Charts - Legend Customization

Refer to the following article for more information about legend configuration in Blazor Charts: Descriptive Elements - Legend.

Respond to Legend Item Clicks

When users click legend items, Chart components raise their LegendClick events (DxChart.LegendClick, DxPolarChart.LegendClick, or DxPieChart.LegendClick). In a handler, you can use the event’s argument properties to obtain information about the series (for all chart types) and the point (for DxPieChart only) associated with the clicked legend item.

<DxChart Data="@DataSource"
         @ref="chart"
         Width="1200px"
         Height="300px"
         SeriesSelectionMode="ChartSelectionMode.Single"
         LegendClick="@OnChartLegendClick">
    <DxChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024"
                      HoverMode="ChartSeriesPointHoverMode.None" />
    <DxChartLineSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                       ValueField="@((StatisticPoint v) => v.Population23)"
                       Name="2023"
                       HoverMode="ChartContinuousSeriesHoverMode.None" />
    <DxChartLegend HoverMode="ChartLegendHoverMode.None" />
</DxChart>

@code {
    DxChart<StatisticPoint> chart;

    public void OnChartLegendClick(ChartLegendClickEventArgs args) {
        if (args.Series != null) {
            var SeriesName = args.Series.Name;
            var TotalPopulation = SeriesName == "2023" ? DataSource.Select(x => x.Population23).Sum() : DataSource.Select(x => x.Population24).Sum();
            ShowDetailDialog(SeriesName, TotalPopulation);
        }
    }
    // ...
}

<DxPolarChart Data="@DataSource"
              @ref="polarChart"
              Width="700px"
              SeriesSelectionMode="ChartSelectionMode.Single"
              LegendClick="@OnPolarLegendClick">
    <DxPolarChartBarSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                           ValueField="@((StatisticPoint v) => v.Population24)"
                           Name="2024"
                           HoverMode="ChartSeriesPointHoverMode.None" />
    <DxPolarChartLineSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                            ValueField="@((StatisticPoint v) => v.Population23)"
                            Name="2023"
                            HoverMode="ChartContinuousSeriesHoverMode.None" />
    <DxChartLegend Position="RelativePosition.Outside"
                   HoverMode="ChartLegendHoverMode.None" />
</DxPolarChart>

@code {
    DxPolarChart<StatisticPoint> polarChart;

    public void OnPolarLegendClick(PolarChartLegendClickEventArgs args) {
        if (args.Series != null) {
            var SeriesName = args.Series.Name;
            var TotalPopulation = SeriesName == "2023" ? DataSource.Select(x => x.Population23).Sum() : DataSource.Select(x => x.Population24).Sum();
            ShowDetailDialog(SeriesName, TotalPopulation);
        }
    }
    // ...
}

<DxPieChart Data="@DataSource"
            @ref="pieChart"
            Width="700px"
            Palette="@(new string[]{"#5f368d", "#28a745", "#00a9e6"})"
            PaletteExtensionMode="ChartPaletteExtensionMode.Blend"
            PointSelectionMode="ChartSelectionMode.Single"
            LegendClick="@OnPieLegendClick">
    <DxPieChartSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024"
                      HoverMode="PieChartSeriesHoverMode.None" />
    <DxChartLegend HorizontalAlignment="HorizontalAlignment.Right"
                   Orientation="Orientation.Vertical"
                   HoverMode="ChartLegendHoverMode.None" />
</DxPieChart>

@code {
    DxPieChart<StatisticPoint> pieChart;

    public void OnPieLegendClick(PieChartLegendClickEventArgs args) {
        if (args.Point != null) {
            var country = args.Point.Argument.ToString();
            var population = args.Point.Value.ToString();
            var dataItem = args.Point.DataItems.First() as StatisticPoint;

            ShowDetailDialog(country, population);
        }
    }
    // ...
}

IEnumerable<StatisticPoint> DataSource = Enumerable.Empty<StatisticPoint>();
protected override void OnInitialized() {
    DataSource = GenerateData();
}

public static List<StatisticPoint> GenerateData() {
    return new List<StatisticPoint>() {
    new StatisticPoint("Germany", 84552242, 83294633),
    new StatisticPoint("UK", 69138192, 67736802),
    new StatisticPoint("France", 66548530, 64756584),
    new StatisticPoint("Italy", 59342867, 58870763),
    new StatisticPoint("Spain", 47910526, 47519628),
};
}
public class StatisticPoint {
    public string Country { get; set; }
    public int Population24 { get; set; }
    public int Population23 { get; set; }
    public StatisticPoint(string country, int population24, int population23) {
        Country = country;
        Population24 = population24;
        Population23 = population23;
    }
}