ChartSeriesClickEventArgs.Point Property

Returns the point that a user clicks in the chart.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public ChartSeriesPoint Point { get; }

Property Value

Type	Description
ChartSeriesPoint	A series point.

Remarks

The following example displays information about a DxChartScatterSeries<T, TArgument, TValue> point when a user clicks it:

Razor

@page "/"
@using System.Drawing


<DxChart Data="@dataPoints"
         Width=500 Height=300
         SeriesClick=@OnSeriesClick>
    <DxChartScatterSeries ArgumentField="@((DataPoint i) => i.Arg)"
                          ValueField="@((DataPoint i) => i.Value1)"
                          Name="Series 1">
        <DxChartSeriesPoint Size=20 />
    </DxChartScatterSeries>
</DxChart>
<br />
<br />
@if (ClickedPointArgs != null) {
    <div id="point-args">
        <table>
            <tr> <td>Point Value:</td><td> @ClickedPointArgs.Point.Value</td> </tr>
            <tr> <td>Argument:</td><td> @ClickedPointArgs.Point.Argument</td> </tr>
        </table>
    </div>
}
@code {
    private DataPoint[] dataPoints;

    ChartSeriesClickEventArgs ClickedPointArgs { get; set; }
    void OnSeriesClick(ChartSeriesClickEventArgs seriesArgs) {
        ClickedPointArgs = seriesArgs;
    }

    protected override void OnInitialized() {
        dataPoints = GetDataPoints();
    }
    public class DataPoint {
        public string Arg { get; set; }
        public int Value1 { get; set; }
        public int Value2 => (int)(Value1 * 1.2);
        public double Value3 { get; set; }
    }
    public DataPoint[] GetDataPoints() {
        DataPoint[] dataPoints = new DataPoint[] {
            new DataPoint() { Arg = "I", Value1 = 26, Value3 = 23},
            new DataPoint() { Arg = "II", Value1 = 24, Value3 = 23},
            new DataPoint() { Arg = "III", Value1 = 25, Value3 = 24},
            new DataPoint() { Arg = "IV", Value1 = 27, Value3 = 29},
            new DataPoint() { Arg = "V", Value1 = 28, Value3 = 30},
        };
        return dataPoints;
    }
}