DxChartBase.PointClick Event

Fires when a user clicks a point of the chart series.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<ChartPointClickEventArgs> PointClick { get; set; }

Event Data

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

Property	Description
Point	Gets the clicked series point.
Series	Gets the series to which the clicked point belongs.

Remarks

The following code sample shows how to obtain data when you click a chart’s series point:

Index.razor

@using Chart.Data

<DxChart Data="@SalesData" PointClick=@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) {
    <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 {
    ChartPointClickEventArgs ClickedPointArgs { get; set; }
    IEnumerable<SaleInfo> SalesData;

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

    void OnPointClick(ChartPointClickEventArgs 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; }
    }
}