DxPieChart<T>.PointSelectionMode Property

Specifies whether a user can select pie sectors.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(ChartSelectionMode.None)]
[Parameter]
public ChartSelectionMode PointSelectionMode { get; set; }

Property Value

Type	Default	Description
ChartSelectionMode	None	A value that identifies a selection mode.

Available values:

Name	Description
None	A user cannot select points or series.
Single	A single point or series can be selected at the same time.
Multiple	Multiple points or series can be selected at the same time.

Remarks

A user should click a pie sector to select it:

Example

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

Razor

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