Skip to main content
All docs
V26.1
  • DxPieChartSeries<T, TArgument, TValue> Class

    Defines a pie or donut series.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v26.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public class DxPieChartSeries<T, TArgument, TValue> :
        DxComplexSettingsComponent<DxPieChartSeries<T, TArgument, TValue>, IPieChartSeriesModel>,
        IModelProvider<ChartSeriesLabelModel>,
        IModelProvider<ChartSeriesLegendItemModel>,
        IPieChartSeries,
        IChartSeriesBase

    Type Parameters

    Name Description
    T

    The type of data.

    TArgument

    The type of arguments.

    TValue

    The type of values.

    Remarks

    The following image demonstrates a pie chart sample:

    Pie Chart

    Use the Pie Chart’s Data property to specify an IEnumerable<T> data source. The chart should contain at least one series to display data. Use the following series properties to bind the data source fields to the series:

    ArgumentField
    Specifies a data source field that contains arguments for series values.
    ValueField
    Specifies a data source field that contains values for series points.

    For a sample data source, refer to our GitHub repository.

    @inject ISalesInfoDataProvider Sales
    
    <DxPieChart Data="@SalesData"
                Diameter="diameter"
                InnerDiameter="innerDiameter"
                StartAngle="startAngle"
                SegmentDirection="segmentDirection"
                T="SaleInfo">
    
        <DxPieChartSeries T="SaleInfo"
                          TArgument="string"
                          TValue="double"
                          ValueField="si => si.Amount"
                          ArgumentField="si => si.Region"
                          SummaryMethod="Enumerable.Sum">
            <DxChartSeriesLabel Visible="showLabels"
                                Position="labelPosition"
                                ValueFormat="ChartElementFormat.Thousands(1)">
                <DxChartSeriesLabelConnector Visible="true" />
            </DxChartSeriesLabel>
        </DxPieChartSeries>
    @* ... *@
        <DxChartTitle Text="Sales by Continent">
            <DxChartSubTitle Text="USD" />
        </DxChartTitle>
    
        <DxChartLegend HorizontalAlignment="HorizontalAlignment.Center"
                       VerticalAlignment="VerticalEdge.Bottom"
                       Position="RelativePosition.Outside"
                       Orientation="Orientation.Horizontal" />
    </DxPieChart>
    @* ... *@
    @code {
        IEnumerable<SaleInfo> SalesData;
        double? diameter = null;
        double innerDiameter = 0.5;
        bool showLabels = true;
        int startAngle = 0;
        PieChartSegmentDirection segmentDirection = PieChartSegmentDirection.Clockwise;
        RelativePosition labelPosition = RelativePosition.Outside;
    
        protected override async Task OnInitializedAsync() {
            SalesData = await Sales.GetSalesAsync();
        }
    }
    

    Run Demo: Pie Chart

    Inheritance

    Object
    ComponentBase
    DxSettingsComponent<DevExpress.Blazor.Internal.IPieChartSeriesModel>
    DxComplexSettingsComponent<DxPieChartSeries<T, TArgument, TValue>, DevExpress.Blazor.Internal.IPieChartSeriesModel>
    DxPieChartSeries<T, TArgument, TValue>
    See Also