Pie Chart Nested Component Structure

• Jul 19, 2024
• 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.

Show the Full Structure

• DxPieChart<T>
  • DxPieChartSeries
    • DxChartSeriesLabel
      • DxChartSeriesLabelConnector
      • DxChartFont
      • DxChartSeriesLabelBorder
    • DxChartSeriesLegendItem
      • DxChartSeriesLegendItem.TextTemplate
  • DxChartTitle
    • DxChartSubTitle
  • DxChartLegend
    • DxChartTitle
      • DxChartSubTitle
  • DxPieChartAnnotation
    • DxChartAnnotationImage
    • DxChartAnnotationBorder
    • DxChartAnnotationShadow
    • DxChartFont
  • DxChartTooltip
    • DxChartTooltip.ChildContent
  • DxChartAnimationSettings

First-Level Components

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

• One or more DxPieChartSeries
• DxChartLegend
• DxChartTitle
• One or more DxPieChartAnnotation
• DxChartTooltip
• DxChartAnimationSettings

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

Razor

<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();
    }
}

SaleInfo

using System;

public class SaleInfo {
    public int OrderId { get; set; }
    public string Region { get; set; }
    public string Country { get; set; }
    public string City { get; set; }
    public int Amount { get; set; }
    public DateTime Date { get; set; }
}

Sales

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

public class Sales {
    static IList<SaleInfo> dataSource;
    static Sales() {
        CreateDataSource();
    }

    public static Task<IQueryable<SaleInfo>> GetSalesAsync() {
        return Task.FromResult(dataSource.AsQueryable());
    }

    static void CreateDataSource() {
        dataSource = new List<SaleInfo> {
        new SaleInfo {
                OrderId = 10248,
                Region = "North America",
                Country = "United States",
                City = "New York",
                Amount = 1740,
                Date = DateTime.Parse("2017/01/06")
            },
            new SaleInfo {
                OrderId = 10249,
                Region = "North America",
                Country = "United States",
                City = "Los Angeles",
                Amount = 850,
                Date = DateTime.Parse("2017/01/13")
            },
            new SaleInfo {
                OrderId = 10250,
                Region = "North America",
                Country = "United States",
                City = "Denver",
                Amount = 2235,
                Date = DateTime.Parse("2017/01/07")
            },
            new SaleInfo {
                OrderId = 10251,
                Region = "North America",
                Country = "Canada",
                City = "Vancouver",
                Amount = 1965,
                Date = DateTime.Parse("2017/01/03")
            },
            new SaleInfo {
                OrderId = 10252,
                Region = "North America",
                Country = "Canada",
                City = "Edmonton",
                Amount = 880,
                Date = DateTime.Parse("2017/01/10")
            },
            new SaleInfo {
                OrderId = 10253,
                Region = "South America",
                Country = "Brazil",
                City = "Rio de Janeiro",
                Amount = 5260,
                Date = DateTime.Parse("2017/01/17")
            },
            new SaleInfo {
                OrderId = 10254,
                Region = "South America",
                Country = "Argentina",
                City = "Buenos Aires",
                Amount = 2790,
                Date = DateTime.Parse("2017/01/21")
            },
            new SaleInfo {
                OrderId = 10255,
                Region = "South America",
                Country = "Paraguay",
                City = "Asuncion",
                Amount = 3140,
                Date = DateTime.Parse("2017/01/01")
            },
            new SaleInfo {
                OrderId = 10256,
                Region = "Europe",
                Country = "United Kingdom",
                City = "London",
                Amount = 6175,
                Date = DateTime.Parse("2017/01/24")
            },
            new SaleInfo {
                OrderId = 10257,
                Region = "Europe",
                Country = "Germany",
                City = "Berlin",
                Amount = 4575,
                Date = DateTime.Parse("2017/01/11")
            },
            // ...
    };
    }
}

Second-Level Components

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

Series

A pie chart series can include:

• DxChartSeriesLabel
• DxChartSeriesLegendItem

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

<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.

<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.

<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.

<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.

<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.

<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>