blazor-405046-components-charts-pie-chart-pie-chart-nested-component-structure.md
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
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 class="m-3">
<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();
}
}
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; }
}
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")
},
// ...
};
}
}
This section lists first-level components that can contain child components.
A pie chart series can include:
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>
The DxChartTitle component can contain the DxChartSubTitle.
<DxChartTitle Text="Sales Amount">
<DxChartSubTitle Text="by regions" />
</DxChartTitle>
This section lists second-level components that can contain child components.
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>
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>
The DxChartSeriesLabel component can contain the following child components:
DxChartSeriesLabelConnectorCustomizes a line displayed between a point and its label.DxChartFontContains the element’s font settings.DxChartSeriesLabelBorderDefines 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>
The DxPieChartAnnotation component can contain the following child components:
DxChartAnnotationImageDefines settings for image annotations.DxChartAnnotationBorderDefines annotation border settings.DxChartAnnotationShadowDefines annotation shadow settings.DxChartFontContains 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>