Polar Chart Nested Component Structure

• Aug 06, 2024
• 4 minutes to read

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

• DxPolarChart<T>
  • Individual Series
    • DxChartSeriesPoint
      • DxChartSeriesPointImage
    • DxChartSeriesLabel
      • DxChartSeriesLabelConnector
      • DxChartFont
      • DxChartSeriesLabelBorder
    • DxChartSeriesLegendItem
      • DxChartSeriesLegendItem.TextTemplate
  • DxChartTitle
    • DxChartSubTitle
  • DxChartLegend
    • DxChartTitle
      • DxChartSubTitle
  • DxPolarChartArgumentAxis / DxPolarChartValueAxis
    • DxChartAxisGridLines
    • DxChartAxisTick
    • DxChartAxisMinorTick
    • DxChartConstantLine
      • DxChartConstantLineLabel
        • DxChartFont
    • DxPolarChartAxisLabel
      • DxChartFont
  • DxChartTooltip
    • DxChartTooltip.ChildContent
  • DxChartAnimationSettings

First-Level Components

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

• One or more individual series
• DxChartLegend
• DxChartTitle
• DxPolarChartArgumentAxis
• DxPolarChartValueAxis
• DxChartTooltip
• DxChartAnimationSettings

The following code snippet adds first-level components to polar chart markup:

Razor

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

DiscretePoint.cs

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

ChartDiscreteDataProvider.cs

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

Second-Level Components

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

Individual Series

An individual series of any type can include:

• DxChartSeriesPoint
• DxChartSeriesLabel
• DxChartSeriesLegendItem

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>

Axes

The argument and value axes can contain the following components:

• DxChartAxisGridLines
• DxChartAxisTick
• DxChartAxisMinorTick
• DxChartConstantLine
• DxPolarChartAxisLabel

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>

Title

The DxChartTitle component can contain the DxChartSubTitle.

<DxChartTitle Text="Average Temperature in London">
    <DxChartSubTitle Text="Degree Celsius" />
</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 Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Right">
    <DxChartTitle Text="Years">
        <DxChartSubTitle Text="(2020-2024)" />
    </DxChartTitle>
</DxChartLegend>

Legend Item

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>

Constant Line

The DxChartConstantLine component can contain the DxChartConstantLineLabel that configures the constant line’s label.

<DxChartConstantLine Value="@(04/01/2024)">
    <DxChartConstantLineLabel Position="RelativePosition.Outside" />
</DxChartConstantLine>

Series Point

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>

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.

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