Skip to main content

DxChart<T>.SeriesClick Event

Fires when a user clicks a chart series.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<ChartSeriesClickEventArgs> SeriesClick { get; set; }

Event Data

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

Property Description
Point Returns the point that a user clicks in the chart.
Series Gets the clicked series of the chart.

Remarks

The following code sample obtains data when you click chart series. When a user clicks a chart series, a list with city names related to the corresponding region is displayed under the chart.

The following image illustrates the list with Beijing, Tokyo, and Seoul city names displayed when a user clicks the Asia series:

Chart onSeriesClick event

@using Chart.Data

<DxChart Data="@SalesData" SeriesClick=@OnSeriesClick>
    <DxChartCommonSeries SummaryMethod="Enumerable.Sum"
                         NameField="@((SaleInfo s) => s.Region)"
                         ArgumentField="@((SaleInfo s) => s.Date.Year)"
                         ValueField="@((SaleInfo s) => s.Amount)"
    SeriesType="ChartSeriesType.Area">
    </DxChartCommonSeries>
    <DxChartArgumentAxis DivisionFactor="400"/>
    <DxChartLegend Position="RelativePosition.Outside"/>
</DxChart> 

@foreach(var city in cities) {
    <table><td>Region City:</td><td>@city</td></table>    
}
@code {
    IEnumerable<SaleInfo> SalesData;
    IEnumerable<string> cities = Enumerable.Empty<string>();

    protected override async Task OnInitializedAsync() {
        SalesData = await Sales.GetSalesAsync();
    }
    void OnSeriesClick(ChartSeriesClickEventArgs args) {
      cities = SalesData.Where(item => item.Region == args.Series.Name).Select(item => ((SaleInfo)item).City).Distinct();
    }
}
See Also