blazor-devexpress-dot-blazor-45fec22c.md
Provides data for the SeriesClick event.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public class ChartSeriesClickEventArgs :
EventArgs
ChartSeriesClickEventArgs is the data class for the following events:
Use the Series property to obtain the clicked series settings.
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:
@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();
}
}
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")
},
// ...
};
}
}
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; }
}
}
Object EventArgs ChartSeriesClickEventArgs
See Also