DxChart<T>.LegendClick Event

Fires when a user clicks a legend item.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[Parameter]
public EventCallback<ChartLegendClickEventArgs> LegendClick { get; set; }

Event Data

The LegendClick event's data class is ChartLegendClickEventArgs. The following properties provide information specific to this event:

Property	Description
Series	Returns the series associated with the clicked legend item.

Remarks

The DxChart component’s legend lists all chart series as legend items. When a user clicks an item, the component raises the LegendClick event. In a handler, you can use the Series argument property to obtain information about the series 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;
    }
}