DxPieChart<T>.LegendClick Event

Fires when a user clicks a legend item.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Event Data

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

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

Remarks

The DxPieChart component’s legend lists all pie sectors as legend items. When a user clicks an item, the component raises the LegendClick event. In a handler, you can use Series and Point argument properties to obtain information about the series and point associated with the clicked legend item.

Chart

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

Polar

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

Pie and Donut

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

DataSource

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