Back to Devexpress

DxChart<T>.SelectionChanged Event

blazor-devexpress-dot-blazor-dot-dxchart-1-c86bfec9.md

latest4.3 KB
Original Source

DxChart<T>.SelectionChanged Event

Fires when point or series selection changes.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[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:

PropertyDescription
IsPointSelectedIdentifies whether a point is selected.
IsSeriesSelectedIdentifies whether a series is selected.
PointReturns the last point that is clicked (selected or deselected).
SeriesReturns 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:

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>



@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

DxChart<T> Class

DxChart<T> Members

DevExpress.Blazor Namespace