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

DxPieChart<T>.SelectionChanged Event

Fires when pie sector selection changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public Action<PieChartSelectionChangedEventArgs> SelectionChanged { get; set; }

#Event Data

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

Property Description
IsPointSelected Identifies whether a pie sector is selected.
Point Returns the last point that is clicked when selecting.
Series Returns a series to which the clicked point belongs.

#Remarks

Use the PointSelectionMode property to enable pie sector selection in the <DxPieChart> component.

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

#Example

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

A pie slice is selected.

@page "/"
<DxPieChart Data="@infos"
            Diameter="1"
            InnerDiameter="0.5"
            Width="500" Height="300" 
            PointSelectionMode=ChartSelectionMode.Single
            SelectionChanged="@OnSelectionChanged">
    <DxPieChartSeries T="SessionInfo"
                      TArgument="string"
                      TValue="double"
                      ArgumentField="i => i.Country"
                      ValueField="i => i.Total"/>
</DxPieChart>
<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 {
    private SessionInfo[] infos;
    PieChartSelectionChangedEventArgs Selection { get; set; }
    protected override void OnInitialized() {
        infos = GetSessionInfos();
    }
    void OnSelectionChanged(PieChartSelectionChangedEventArgs selectionArgs) {
        Selection = selectionArgs;
        StateHasChanged();
    }
    public class SessionInfo {
        public string Country { get; set; }
        public int Total { get; set; }
    }
    public SessionInfo[] GetSessionInfos() {
        SessionInfo[] sales = new SessionInfo[] {
            new SessionInfo() { Country = "China",          Total = 16591},
            new SessionInfo() { Country = "United States",  Total = 10286},
            new SessionInfo() { Country = "India",          Total = 7978},
            new SessionInfo() { Country = "South Korea",    Total = 6118},
            new SessionInfo() { Country = "Germany",        Total = 5385},
            new SessionInfo() { Country = "Turkey",         Total = 5064},
            new SessionInfo() { Country = "Vietnam",        Total = 2804},
            new SessionInfo() { Country = "United Kingdom", Total = 2451},
            new SessionInfo() { Country = "Italy",          Total = 2130},
            new SessionInfo() { Country = "Brazil",         Total = 2093},
        };
        return sales;
    }
}
See Also