DxChart<T>.SelectionChanged Event

Fires when point or series selection changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.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 SeriesSelectionMode or PointSelectionMode property to enable series or point selection in the <DxChart> component.

The SelectionChanged event fires when a user selects/deselects a series/point or you call the following methods:

• SelectPoints / DeselectPoints
• SelectSeries / DeselectSeries
• ClearSelectionAsync()

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