blazor-405047-components-charts-polar-chart-polar-chart-nested-component-structure.md
The DxPolarChart 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 Chart’s root level (<DxPolarChart>...</DxPolarChart>) can contain the following components:
The following code snippet adds first-level components to polar chart markup:
@using System.Drawing
<DxPolarChart Data=@DataSource>
<DxPolarChartBarSeries Name="Day"
Color="Color.Sienna"
ArgumentField="@((DiscretePoint i) => i.Arg)"
ValueField="@((DiscretePoint i) => i.Day)" />
<DxPolarChartBarSeries Name="Night"
Color="Color.MidnightBlue"
ArgumentField="@((DiscretePoint i) => i.Arg)"
ValueField="@((DiscretePoint i) => i.Night)" />
<DxPolarChartArgumentAxis ArgumentType="ChartAxisDataType.DateTime" />
<DxChartTitle Text="Average Temperature in London" />
<DxChartLegend Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Right" />
<DxChartTooltip Enabled="true">
<div class="discrete-chart-tooltip">
@context.Point.Value °C
</div>
</DxChartTooltip>
<DxChartAnimationSettings Enable="false" />
</DxPolarChart>
namespace BlazorDemo.Data {
public class DiscretePoint {
public string Arg { get; set; }
public int Day { get; set; }
public int Night { get; set; }
public DiscretePoint(string arg, int day, int night) {
Arg = arg;
Day = day;
Night = night;
}
}
}
using System.Collections.Generic;
using BlazorDemo.Data;
namespace BlazorDemo.DataProviders.Implementation {
public class ChartDiscreteDataProvider : IChartDiscreteDataProvider {
public List<DiscretePoint> GenerateData() {
return new List<DiscretePoint>() {
new DiscretePoint("01/01/2024", 6, 2),
new DiscretePoint("02/01/2024", 7, 2),
new DiscretePoint("03/012024", 10, 3),
new DiscretePoint("04/01/2024", 14, 5),
new DiscretePoint("05/01/2024", 18, 8),
new DiscretePoint("06/01/2024", 21, 11),
new DiscretePoint("07/01/2024", 22, 13),
new DiscretePoint("08/01/2024", 22, 13),
new DiscretePoint("09/01/2024", 19, 11),
new DiscretePoint("10/01/2024", 15, 8),
new DiscretePoint("11/01/2024", 10, 5),
new DiscretePoint("12/01/2024", 7, 3),
};
}
}
}
This section lists first-level components that can contain child components.
An individual series of any type can include:
The following code snippet creates a line series and adds second-level components to series markup:
<DxPolarChartLineSeries ArgumentField="@((DataPoint i) => i.X)"
ValueField="@((DataPoint i) => i.Y)">
<DxChartSeriesLabel Visible="true" BackgroundColor="System.Drawing.Color.Violet">
<DxChartSeriesLabelBorder Visible="true"
DashStyle="ChartDashStyle.LongDash"
Color="White" />
<DxChartSeriesLabelConnector Color="System.Drawing.Color.DarkGreen" Visible="true" />
<DxChartFont Color="white" />
</DxChartSeriesLabel>
<DxChartSeriesPoint Symbol="ChartPointSymbol.Cross">
<DxChartSeriesLegendItem>
<TextTemplate>@context</TextTemplate>
</DxChartSeriesLegendItem>
</DxPolarChartLineSeries>
The argument and value axes can contain the following components:
The following code snippet adds second-level component to the markup of polar chart axes:
<DxPolarChartArgumentAxis Period="720"
Inverted="true"
StartAngle="90"
TickInterval="45">
<DxChartConstantLine Value="15" />
<DxPolarChartAxisLabel IndentFromAxis="15" />
<DxChartAxisTick Color="Color.Purple" />
<DxChartAxisMinorTick Visible="true" />
</DxPolarChartArgumentAxis>
<DxPolarChartValueAxis>
<DxChartConstantLine Value="1.5" />
<DxPolarChartAxisLabel IndentFromAxis="15" />
</DxPolarChartValueAxis>
The DxChartTitle component can contain the DxChartSubTitle.
<DxChartTitle Text="Average Temperature in London">
<DxChartSubTitle Text="Degree Celsius" />
</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 Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Right">
<DxChartTitle Text="Years">
<DxChartSubTitle Text="(2020-2024)" />
</DxChartTitle>
</DxChartLegend>
The DxChartSeriesLegendItem component can contain the TextTemplate that customizes a legend item’s text.
<DxPolarChartLineSeries ArgumentField="@((DataPoint i) => i.X)"
ValueField="@((DataPoint i) => i.Y)">
<DxChartSeriesLegendItem>
<TextTemplate>@context</TextTemplate>
</DxChartSeriesLegendItem>
</DxPolarChartLineSeries>
The DxChartConstantLine component can contain the DxChartConstantLineLabel that configures the constant line’s label.
<DxChartConstantLine Value="@(04/01/2024)">
<DxChartConstantLineLabel Position="RelativePosition.Outside" />
</DxChartConstantLine>
The DxChartSeriesPoint component can contain a DxChartSeriesPointImage object that customizes the series point image.
<DxPolarChartLineSeries ArgumentField="@((DiscretePoint i) => i.Arg)"
ValueField="@((DiscretePoint i) => i.Day)">
<DxChartSeriesPoint Color="Color.SlateBlue">
<DxChartSeriesPointImage Width="50" Height="50" />
</DxChartSeriesPoint>
</DxPolarChartLineSeries>
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.
<DxPolarChartLineSeries ArgumentField="@((DataPoint i) => i.X)"
ValueField="@((DataPoint i) => i.Y)">
<DxChartSeriesLabel Visible="true" BackgroundColor="System.Drawing.Color.Violet">
<DxChartSeriesLabelBorder Visible="true"
DashStyle="ChartDashStyle.LongDash"
Color="White" />
<DxChartSeriesLabelConnector Color="System.Drawing.Color.DarkGreen" Visible="true" />
<DxChartFont Color="white" />
</DxChartSeriesLabel>
</DxPolarChartLineSeries>