Skip to main content
All docs
V25.1
  • DevExpress v25.1 Update — Your Feedback Matters

    Our What's New in v25.1 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

    Pie Chart Nested Component Structure

    • 4 minutes to read

    The DxPieChart component can include multiple sub-elements, such as a series, title, legend, or annotation. To display sub-elements on the chart plane, add the corresponding nested components to chart markup. You should declare nested components at appropriate nesting levels to render the chart component correctly.

    This topic contains detailed information about available nesting levels and components permitted at each level.

    #First-Level Components

    The Pie Chart’s root level (<DxPieChart>...</DxPieChart>) can contain the following components:

    The following code snippet adds first-level components to pie chart markup. For a sample data source, refer to our GitHub repository.

    <DxPieChart Data="@SalesData">
        <DxPieChartSeries T="SaleInfo"
                          TArgument="string"
                          TValue="double"
                          ValueField="si => si.Amount"
                          ArgumentField="si => si.Region"
                          SummaryMethod="Enumerable.Sum"
                          Name="Region Sales">
        </DxPieChartSeries>
        <DxChartTitle Text="Sales Amount" />
        <DxChartLegend AllowToggleSeries="true"
                       Position="RelativePosition.Outside" />
        <DxPieChartAnnotation Text="Asia"
                              Argument="@("Asia")"
                              Series="Region Sales"
                              Opacity="1" />
        <DxChartTooltip Enabled="true"
                        Position="RelativePosition.Outside">
            <div style="margin: 0.75rem">
                <div class="font-weight-bold">@context.Point.Argument</div>
                <div>Sales: @($"${context.Point.Value:#,0.00}")</div>
            </div>
        </DxChartTooltip>
    </DxPieChart>
    
    @code {
        IEnumerable<SaleInfo> SalesData;
    
        protected override async Task OnInitializedAsync() {
            SalesData = await Sales.GetSalesAsync();
        }
    }
    

    #Second-Level Components

    This section lists first-level components that can contain child components.

    #Series

    A pie chart series can include:

    The following code snippet creates a pie chart series and adds second-level components to series markup:

    Razor
    <DxPieChartSeries T="DailyData"
                      TArgument="DateTime"
                      TValue="int"
                      ArgumentField="@(s => s.Date)"
                      ValueField="@(s => s.Value)">
        <DxChartSeriesLabel Position="RelativePosition.Outside" />
        <DxChartSeriesLegendItem IconCssClass="oi oi-flag">
            <TextTemplate>@context</TextTemplate>
        </DxChartSeriesLegendItem>
    </DxPieChartSeries>
    

    #Title

    The DxChartTitle component can contain the DxChartSubTitle.

    Razor
    <DxChartTitle Text="Sales Amount">
        <DxChartSubTitle Text="by regions" />
    </DxChartTitle>
    

    #Third-Level Components

    This section lists second-level components that can contain child components.

    #Legend

    The DxChartLegend component can contain DxChartTitle and DxChartSubTitle (inside the title’s markup) objects.

    Razor
    <DxChartLegend HorizontalAlignment="HorizontalAlignment.Right"
                   Orientation="Orientation.Vertical">
        <DxChartTitle Text="Region">
            <DxChartSubTitle Text="(2017-2019)" />
        </DxChartTitle>
    </DxChartLegend>
    

    #Legend Item

    The DxChartSeriesLegendItem component can contain the TextTemplate that customizes a legend item’s text.

    Razor
    <DxPieChartSeries T="DailyData"
                      TArgument="DateTime"
                      TValue="int"
                      ArgumentField="@(s => s.Date)"
                      ValueField="@(s => s.Value)">
        <DxChartSeriesLegendItem IconCssClass="oi oi-flag">
            <TextTemplate>@context</TextTemplate>
        </DxChartSeriesLegendItem>
    </DxPieChartSeries>
    

    #Series Label

    The DxChartSeriesLabel component can contain the following child components:

    DxChartSeriesLabelConnector
    Customizes a line displayed between a point and its label.
    DxChartFont
    Contains the element’s font settings.
    DxChartSeriesLabelBorder
    Defines series label border settings.
    Razor
    <DxChartSeriesLabel Visible="showLabels"
                        Position="labelPosition"
                        ValueFormat="ChartElementFormat.Thousands(1)">
        <DxChartSeriesLabelConnector Width="3" />
        <DxChartFont Size="14" Weight="600" Color="White"/>
        <DxChartSeriesLabelBorder Color="black" Visible="true"/>
    </DxChartSeriesLabel>
    

    #Annotation

    The DxPieChartAnnotation component can contain the following child components:

    DxChartAnnotationImage
    Defines settings for image annotations.
    DxChartAnnotationBorder
    Defines annotation border settings.
    DxChartAnnotationShadow
    Defines annotation shadow settings.
    DxChartFont
    Contains the element’s font settings.
    Razor
    <DxPieChartAnnotation Type="ChartAnnotationType.Image"
                          Argument="@("New York")"
                          Series="City Sales"
                          Location="PieChartAnnotationLocation.Edge"
                          Opacity="1">
        <DxChartAnnotationImage Url="https://cdn-icons-png.flaticon.com/512/618/618848.png" />
        <DxChartAnnotationBorder Color="#FFC107" Width="2" CornerRadius="4" />
    </DxPieChartAnnotation>