IChartSeries Interface

Implements the chart series settings.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public interface IChartSeries :
    IChartSeriesBase

Related API Members

The following members return IChartSeries objects:

• ChartSelectionChangedEventArgs.Series
• ChartSeriesClickEventArgs.Series

Remarks

The IChartSeries interface allows you to access series settings when you handle the SeriesClick event.

The following code sample obtains data when you click a chart’s series point:

Index.razor

@using Chart.Data

<DxChart Data="@SalesData" SeriesClick=@OnPointClick>
    <DxChartStackedBarSeries Name="2017"
                                 Filter="@((SaleInfo s) => s.Date.Year == 2017)"
                                 SummaryMethod="Enumerable.Sum"
                                 ArgumentField="@(s => s.City)"
                                 ValueField="@(s => s.Amount)" />
    <DxChartStackedBarSeries Name="2018"
                                 Filter="@((SaleInfo s) => s.Date.Year == 2018)"
                                 SummaryMethod="Enumerable.Sum"
                                 ArgumentField="@(s => s.City)"
                                 ValueField="@(s => s.Amount)" />
    <DxChartStackedBarSeries Name="2019"
                                 Filter="@((SaleInfo s) => s.Date.Year == 2019)"
                                 SummaryMethod="Enumerable.Sum"
                                 ArgumentField="@(s => s.City)"
                                 ValueField="@(s => s.Amount)" />
    <DxChartSplineSeries Name="Total"
                         SummaryMethod="Enumerable.Sum"
                         ArgumentField="@((SaleInfo s) => s.City)"
                         ValueField="@(s => s.Amount)"
                         />
</DxChart>
@if ((ClickedPointArgs != null) && (ClickedPointArgs.Point != null)) {
    <div id="point-args">
        <table><tr> <td>Series Name:</td><td>@ClickedPointArgs.Series.Name</td> </tr>
            <tr> <td>Stack:</td><td> @(((IChartSeries)ClickedPointArgs.Series).Stack)</td> </tr>
            <tr> <td>Point Value:</td><td> @ClickedPointArgs.Point.Value</td> </tr>
            <tr> <td>Argument:</td><td> @ClickedPointArgs.Point.Argument</td> </tr>
            @foreach(SaleInfo item in ClickedPointArgs.Point.DataItems) {
                <tr><td>Point Item:</td><td>@item.Amount in @item.City</td> </tr>
            }
        </table>
    </div>
}
@code {
    ChartSeriesClickEventArgs ClickedPointArgs { get; set; }
    IEnumerable<SaleInfo> SalesData;

    protected override async Task OnInitializedAsync()
    {
        SalesData = await Sales.GetSalesAsync();
    }

    void OnPointClick(ChartSeriesClickEventArgs pointArgs) {
        ClickedPointArgs = pointArgs;
    }
}

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; }
    }
}