ChartLegendClickEventArgs Class
Namespace: DevExpress.Blazor
Assembly:
DevExpress.Blazor.v25.1.dll
NuGet Package:
DevExpress.Blazor
Declaration
public class ChartLegendClickEventArgs :
EventArgs
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.
<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;
}
}
See Also