DxChart<T>.SeriesClick Event

Fires when a user clicks a chart series.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.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 shows how to obtain 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:

Index.razor

@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();
    }
}

Sales.cs

namespace Chart.Data {
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;

    public class Sales {
        static IList<SaleInfo> dataSource;
        static Sales() {
            CreateDataSource();
        }

        public static Task<IQueryable<SaleInfo>> GetSalesAsync() {
            return Task.FromResult(dataSource.AsQueryable());
        }

        static void CreateDataSource() {
            dataSource = new List<SaleInfo> {
            new SaleInfo {
                    OrderId = 10248,
                    Region = "North America",
                    Country = "United States",
                    City = "New York",
                    Amount = 1740,
                    Date = DateTime.Parse("2017/01/06")
                },
                new SaleInfo {
                    OrderId = 10249,
                    Region = "North America",
                    Country = "United States",
                    City = "Los Angeles",
                    Amount = 850,
                    Date = DateTime.Parse("2017/01/13")
                },
                new SaleInfo {
                    OrderId = 10250,
                    Region = "North America",
                    Country = "United States",
                    City = "Denver",
                    Amount = 2235,
                    Date = DateTime.Parse("2017/01/07")
                },
                new SaleInfo {
                    OrderId = 10251,
                    Region = "North America",
                    Country = "Canada",
                    City = "Vancouver",
                    Amount = 1965,
                    Date = DateTime.Parse("2017/01/03")
                },
                new SaleInfo {
                    OrderId = 10252,
                    Region = "North America",
                    Country = "Canada",
                    City = "Edmonton",
                    Amount = 880,
                    Date = DateTime.Parse("2017/01/10")
                },
                new SaleInfo {
                    OrderId = 10253,
                    Region = "South America",
                    Country = "Brazil",
                    City = "Rio de Janeiro",
                    Amount = 5260,
                    Date = DateTime.Parse("2017/01/17")
                },
                new SaleInfo {
                    OrderId = 10254,
                    Region = "South America",
                    Country = "Argentina",
                    City = "Buenos Aires",
                    Amount = 2790,
                    Date = DateTime.Parse("2017/01/21")
                },
                new SaleInfo {
                    OrderId = 10255,
                    Region = "South America",
                    Country = "Paraguay",
                    City = "Asuncion",
                    Amount = 3140,
                    Date = DateTime.Parse("2017/01/01")
                },
                new SaleInfo {
                    OrderId = 10256,
                    Region = "Europe",
                    Country = "United Kingdom",
                    City = "London",
                    Amount = 6175,
                    Date = DateTime.Parse("2017/01/24")
                },
                new SaleInfo {
                    OrderId = 10257,
                    Region = "Europe",
                    Country = "Germany",
                    City = "Berlin",
                    Amount = 4575,
                    Date = DateTime.Parse("2017/01/11")
                },
                // ...
        };
        }
    }

SaleInfo

namespace Chart.Data {
    using System;

    public class SaleInfo {
        public int OrderId { get; set; }
        public string Region { get; set; }
        public string Country { get; set; }
        public string City { get; set; }
        public int Amount { get; set; }
        public DateTime Date { get; set; }
    }
}