Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxChart<T>.SeriesClick Event

Fires when a user clicks a chart series.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[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