Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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

C#
[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:

#Example

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

A selected point's argument and value are displayed

@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;
    }
}
See Also