DxChartLegend Class

Defines a chart legend.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

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.

Chart
Polar
Pie and Donut
DataSource

razor

<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>

razor

<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>

razor

<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>

csharp

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 additional 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.

Chart
Polar
Pie and Donut
DataSource

razor

<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);
        }
    }
    // ...
}

razor

<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);
        }
    }
    // ...
}

razor

<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);
        }
    }
    // ...
}

csharp

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;
    }
}

Implements

Inheritance

Object ComponentBase DxSettingsComponent<DevExpress.Blazor.Internal.ChartLegendModel> DxComplexSettingsComponent<DxChartLegend, DevExpress.Blazor.Internal.ChartLegendModel> DxChartLegend