DxChart<T>.SelectionChanged Event

Fires when a user selects/deselects a series or point.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public Action<ChartSelectionChangedEventArgs> SelectionChanged { get; set; }

Event Data

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

Property	Description
IsPointSelected	Identifies whether a point is selected.
IsSeriesSelected	Identifies whether a series is selected.
Point	Returns the last point that is clicked (selected or deselected).
Series	Returns the clicked series or the series to which the clicked point belongs.

Remarks

Use the following properties to enable selection:

• DxChart.SeriesSelectionMode
• DxChart.PointSelectionMode

Example

The following example obtains an argument and value of a selected point:

Razor

@page "/"
@using System.Drawing
@using System.Diagnostics
<DxChart Data="@dataPoints"
         Width=500 Height=300
         PointSelectionMode=ChartSelectionMode.Single
         SelectionChanged="@OnSelectionChanged">
    <DxChartLineSeries ArgumentField="@((DataPoint i) => i.Arg)"
                       ValueField="@((DataPoint i) => i.Value1)"
                       Name="Series 1"
                       HoverMode=ChartContinuousSeriesHoverMode.None>
        <DxChartSeriesPoint HoverMode=ChartSeriesPointHoverMode.None
                            SelectionMode=ChartSeriesPointSelectionMode.Point />
    </DxChartLineSeries>
</DxChart>
<br/><br/>
@if (Selection != null) {
    <div id="selection-args">
        <table>
            <tr> <td>Selected Point Argument:</td><td> @Selection.Point.Argument</td> </tr>
            <tr> <td>Selected Point Value:</td><td> @Selection.Point.Value</td> </tr>
        </table>
    </div>
}
@code {
    ChartSelectionChangedEventArgs Selection { get; set; }
    private DataPoint[] dataPoints;
    protected override void OnInitialized() {
        dataPoints = GetDataPoints();
    }
    void OnSelectionChanged(ChartSelectionChangedEventArgs selectionArgs) {
        Selection = selectionArgs;
        StateHasChanged();
    }
    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;
    }
}