DxPolarChart<T> Class

A control that visualizes bound data as graphs in polar coordinates.

Assembly: DevExpress.Blazor.v24.1.dll

Declaration

public class DxPolarChart<T> :
    DxChartBase,
    IModelProvider<PolarChartArgumentAxisModel>,
    IModelProvider<PolarChartValueAxisModel>,
    IComponentContainer<IPolarChartSeriesModel>

Type Parameters

Name	Description
T	The data item type.

Remarks

The DevExpress Polar Chart for Blazor (<DxPolarChart>) allows you to visualize data within a polar coordinate system - where each point on a plane is determined by the distance from the center and the angle from a fixed direction.

Blazor Polar Chart

Add a Chart to a Project

Follow the steps below to add the Polar Chart component to an application:

Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
Add the <DxPolarChart>…</DxPolarChart> markup to a .razor file.
Bind the component to data.
Configure the component: create series, configure axes, add a legend, titles, tooltips, and so on (see the sections below).

Data Binding

Use the Data property to bind the Polar Chart to data. Follow the steps below to display data within the component:

Bind the Data parameter to a C# field or property.
Populate this field or property with data in the OnInitialized lifecycle method.

<DxPolarChart Data=@DataSource Width="100%" Height="500">
    <DxChartTitle>
        <div class="continuous-chart-title">
            Rose in Polar Coordinates
        </div>
    </DxChartTitle>
    <DxChartLegend Visible="false"/>
    <DxPolarChartArgumentAxis Inverted="true" StartAngle="90" TickInterval="30"/>
    <DxPolarChartLineSeries
        ArgumentField="@((DataPoint i) => i.X)"
        ValueField="@((DataPoint i) => i.Y)"/>
</DxPolarChart>

@code {
    IEnumerable<DataPoint> DataSource = Enumerable.Empty<DataPoint>();

    protected override void OnInitialized () {
        DataSource = ChartContinuousDataProvider.GenerateData();
    }
}

.continuous-chart-title {
    font-size: 1.5em;
    margin-bottom: 1.5rem;
}

using System;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data {
// ...
    public class DataPoint {
        public double X { get; }
        public double Y { get; }

        public DataPoint(double x, double y) {
            X = x;
            Y = y;
        }
    }
}

using System.Collections.Generic;
using BlazorDemo.Data;

// ...
    public class ChartContinuousDataProvider : IChartContinuousDataProvider {
        public List<DataPoint> GenerateData() {
            return new List<DataPoint>() {
                new DataPoint(0, 0),
                new DataPoint(30, 1.7),
                new DataPoint(45, 0),
                new DataPoint(60, 1.7),
                new DataPoint(90, 0),
                new DataPoint(120, 1.7),
                new DataPoint(135, 0),
                new DataPoint(150, 1.7),
                new DataPoint(180, 0),
                new DataPoint(210, 1.7),
                new DataPoint(225, 0),
                new DataPoint(240, 1.7),
                new DataPoint(270, 0),
                new DataPoint(300, 1.7),
                new DataPoint(315, 0),
                new DataPoint(330, 1.7),
                new DataPoint(360, 0),
            };
        }
    }

Polar Chart - Data Binding

If the data source collection implements the INotifyCollectionChanged interface, the chart is updated automatically each time the collection changes. Otherwise, use the RefreshData method to reload data and redraw the component.

To re-render the Chart area without a data reload, call the RedrawAsync method. The chart also redraws itself when a user resizes the component’s root container. Set the RedrawOnResize property to false to disable this behavior. To track the moment when the chart rendering is finished and the component is completely loaded, handle the Rendered event.

Series

A series is a collection of related data points. If you have several series, place them at the same chart hierarchy level. Note that DxPolarChart renders series based on their order in the markup. If you need to change the rendering order, place series in the corresponding positions in the markup.

Closed graph in polar coordinates

You can specify common settings for all chart series at the component level or add series objects to the component’s markup and configure series-specific settings individually. Individual series settings have priority over common series settings.

Series Types

<DxPolarChart> supports multiple 2D series types. You can display data as a single chart or combine different series.

DxPolarChartAreaSeries<T, TArgument, TValue>: Defines an area series.
DxPolarChartBarSeries<T, TArgument, TValue>: Defines a bar series.
DxPolarChartLineSeries<T, TArgument, TValue>: Defines a line series.
DxPolarChartScatterSeries<T, TArgument, TValue>: Defines a scatter series.
DxPolarChartStackedBarSeries<T, TArgument, TValue>: Defines a stacked bar series.
Side-by-side Stacked Bar Series: Specifies the stack in a side-by-side stacked series.

Component Level Settings

Component-level settings apply to all series in the component. The list below contains available options:

BarGroupPadding | BarGroupWidth: Specify the bar series appearance.
PointSelectionMode | SeriesSelectionMode: Specify selection options.
UseSpiderWeb: Specifies whether to display the chart grid as a spider web.
NegativesAsZeroes: Specifies whether the Polar Chart treats negative values as zeros in stacked bar series.

Series-Level Settings

The DxPolarChartBaseSeries class contains properties that you can apply to all series types, for example, series color or visibility.

Each series also allows you to configure its own properties. For example, you can specify the pattern to render the line series (DashStyle).

The following example applies the LongDash pattern:

Long Dashed Line

<DxPolarChart Data=@DataSource>
    <DxPolarChartLineSeries ArgumentField="@((DiscretePoint i) => i.Arg)"
                            ValueField="@((DiscretePoint i) => i.Day)"
                            DashStyle="ChartDashStyle.LongDash">
    </DxPolarChartLineSeries>
</DxPolarChart>

Series Labels

Add a DxChartSeriesLabel object to series markup to configure labels for series data points. To display series labels, set the DxChartSeriesLabel.Visible property to true.

All settings apply to all labels in the series. To override individual label settings, handle the chart’s CustomizeSeriesPoint event and use the event argument’s PointLabel property.

You can use the MaxLabelCount property to limit the number of displayed labels. Additionally, you may use the LabelOverlap property to specify how the Polar Chart displays overlapping labels.

Resolve Overlapping Labels

The following code snippet hides overlapping labels:

@using System.Drawing

<DxPolarChart Data=@DataSource LabelOverlap="PolarChartLabelOverlap.Hide">
    <DxPolarChartBarSeries Name="Day" 
                           Color="Color.Sienna" 
                           ArgumentField="@((DiscretePoint i) => i.Arg)" 
                           ValueField="@((DiscretePoint i) => i.Day)">
        <DxChartSeriesLabel Visible="true" />
    </DxPolarChartBarSeries>
    <DxPolarChartBarSeries Name="Night" 
                           Color="Color.MidnightBlue" 
                           ArgumentField="@((DiscretePoint i) => i.Arg)" 
                           ValueField="@((DiscretePoint i) => i.Night)">
        <DxChartSeriesLabel Visible="true" />
    </DxPolarChartBarSeries>
</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;

// ...
    public class ChartDiscreteDataProvider : IChartDiscreteDataProvider {
        public List<DiscretePoint> GenerateData() {
            return new List<DiscretePoint>() {
                new DiscretePoint("January", 6, 2),
                new DiscretePoint("February", 7, 2),
                new DiscretePoint("March", 10, 3),
                new DiscretePoint("April", 14, 5),
                new DiscretePoint("May", 18, 8),
                new DiscretePoint("June", 21, 11),
                new DiscretePoint("July", 22, 13),
                new DiscretePoint("August", 22, 13),
                new DiscretePoint("September", 19, 11),
                new DiscretePoint("October", 15, 8),
                new DiscretePoint("November", 10, 5),
                new DiscretePoint("December", 7, 3),
            };
        }
    }

You can also use the DxChartSeriesLabelBorder component to configure label borders. Set the Visible property to true to display borders and use Color, DashStyle, or Width properties to customize border appearance.

The following code snippet changes the label background color and configures label borders:

<DxPolarChart Data=@DataSource>
    <DxPolarChartLineSeries ArgumentField="@((DiscretePoint i) => i.Arg)"
                            ValueField="@((DiscretePoint i) => i.Day)">
        <DxChartSeriesLabel Visible="true" BackgroundColor="Color.Violet">
          <DxChartSeriesLabelBorder Visible="true"
                                    DashStyle="ChartDashStyle.LongDash" 
                                    Color="White" />
        </DxChartSeriesLabel>
    </DxPolarChartLineSeries>
</DxPolarChart>

Customize Label Borders

Axes

The DxPolarChartArgumentAxis class defines the argument axis. The following image demonstrates elements that are related to the argument axis:

Argument Axis Nested Elements

The DxPolarChartValueAxis class defines the value axis. The following image demonstrates value axis-related elements:

Value Axis Nested Elements

The Polar Chart component automatically creates its axes based on the data type of the first series in the markup. You can also use DxPolarChartArgumentAxis.ArgumentType and DxPolarChartValueAxis.ArgumentType properties to explicitly specify the axis data type.

The following code snippet casts arguments specified as strings to the DateTime type:

@using System.Drawing

<DxPolarChart Data=@DataSource>
    <DxPolarChartBarSeries Name="Day"
                           Color="Color.Sienna"
                           ArgumentField="@((DiscretePoint i) => i.Arg)"
                           ValueField="@((DiscretePoint i) => i.Day)">
    </DxPolarChartBarSeries>
    <DxPolarChartBarSeries Name="Night"
                           Color="Color.MidnightBlue"
                           ArgumentField="@((DiscretePoint i) => i.Arg)"
                           ValueField="@((DiscretePoint i) => i.Night)">
    </DxPolarChartBarSeries>
    <DxPolarChartArgumentAxis ArgumentType="ChartAxisDataType.DateTime" />
    <DxChartLegend Visible="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),
            };
        }
    }
}

Cast string to DateTime axis values

Set the Visible property to false to hide an axis.

Axis Ticks

Major ticks divide an axis into sections and indicate axis values. Minor ticks divide an axis segment between two neighboring major ticks. Note that discrete axes do not display minor ticks.

Use DxChartAxisTick and DxChartAxisMinorTick objects to customize the appearance of major and minor ticks.

You can also use the following properties to manage axis ticks:

DiscreteDivisionMode: Specifies whether ticks and grid lines lie between or next to axis labels.
TickInterval: Specifies the interval between major ticks. Does not apply to discrete axes.
MinorTickInterval: Specifies the interval between minor ticks. Applies only to continuous axes.
MinorTickCount: Specifies the number of minor ticks between two neighboring major ticks.

Axis Labels

The DxPolarChartAxisLabel nested component implements axis labels. <DxPolarChart> uses smart label management to ensure that labels do not overlap. Set the label’s Visible property to true to show labels. The Format property specifies the format of axis labels.

The following code snippet removes all axis labels:

Axis Labels Removed

<DxPolarChart Data=@DataSource>
    <DxPolarChartArgumentAxis Inverted="true" StartAngle="90" TickInterval="30">
        <DxPolarChartAxisLabel Visible="false" />
    </DxPolarChartArgumentAxis>
    <DxPolarChartValueAxis>
        <DxPolarChartAxisLabel Visible="false" />
    </DxPolarChartValueAxis>
    <DxPolarChartLineSeries ArgumentField="@((DataPoint i) => i.X)"
                            ValueField="@((DataPoint i) => i.Y)"/>
</DxPolarChart>

Legend

The legend (DxChartLegend) lists all chart series. The Polar Chart uses the DxPolarChartBaseSeries.Name property value as a series identifier in the legend if you do not specify the DxChartSeriesLegendItem.Text property.

Use the following API members to configure the legend’s settings:

AllowToggleSeries: Specifies whether users can toggle series visibility
HorizontalAlignment | VerticalAlignment | Position: Specify legend location.
Orientation: Specifies how legend items are arranged, vertically (in a column) or horizontally (in a row).
Visible: Specifies the legend’s visibility.

The following code snippet configures the Polar Chart’s legend:

<DxPolarChart Data=@DataSource>
    <DxChartLegend Orientation="Orientation.Vertical" 
                   HorizontalAlignment="HorizontalAlignment.Right" 
                   AllowToggleSeries="true" />
    <DxPolarChartBarSeries Name="Day"
                           Color="Color.Sienna"
                           ArgumentField="@((DiscretePoint i) => i.Arg)"
                           ValueField="@((DiscretePoint i) => i.Day)">
    </DxPolarChartBarSeries>
    <DxPolarChartBarSeries Name="Night"
                           Color="Color.MidnightBlue"
                           ArgumentField="@((DiscretePoint i) => i.Arg)"
                           ValueField="@((DiscretePoint i) => i.Night)">
    </DxPolarChartBarSeries>
</DxPolarChart

Polar Chart with Legend

Titles and Subtitles

The <DxPolarChart> component can display titles (DxChartTitle) and subtitles (DxChartSubTitle) for the chart area and legend.

The following code snippet declares these objects in the markup:

<DxPolarChart Data=@DataSource>
    <DxChartTitle Text="Average Temperature in London">
        <DxChartSubTitle Text="Degree Celsius" />
    </DxChartTitle>
    <DxChartLegend Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years">
            <DxChartSubTitle Text="(2020-2024)" />
        </DxChartTitle>
    </DxChartLegend>
    <DxPolarChartBarSeries Name="Day"
                           Color="Color.Sienna"
                           ArgumentField="@((DiscretePoint i) => i.Arg)"
                           ValueField="@((DiscretePoint i) => i.Day)">
    </DxPolarChartBarSeries>
    <DxPolarChartBarSeries Name="Night"
                           Color="Color.MidnightBlue"
                           ArgumentField="@((DiscretePoint i) => i.Arg)"
                           ValueField="@((DiscretePoint i) => i.Night)">
    </DxPolarChartBarSeries>
</DxPolarChart>

Polar Chart Title and Subtitle

Tooltips

The Polar Chart can display tooltips when the mouse pointer is above a chart series or point. Add the DxChartTooltip component to the component’s markup and set its Enabled property to true to activate tooltip functionality.

The following code snippet specifies custom content for series point tooltips:

<DxPolarChart Data=@DataSource>
    <DxChartTooltip Enabled="true">
        <div class="discrete-chart-tooltip">
            @context.Point.Value °C
        </div>
    </DxChartTooltip>
    <DxPolarChartBarSeries Name="Day"
                           Color="Color.Sienna"
                           ArgumentField="@((DiscretePoint i) => i.Arg)"
                           ValueField="@((DiscretePoint i) => i.Day)">
    </DxPolarChartBarSeries>
    <DxPolarChartBarSeries Name="Night"
                           Color="Color.MidnightBlue"
                           ArgumentField="@((DiscretePoint i) => i.Arg)"
                           ValueField="@((DiscretePoint i) => i.Night)">
    </DxPolarChartBarSeries>
</DxPolarChart>

Polar Chart - Tooltip

You can also use the following API to manipulate tooltips in code:

ShowTooltip | HideTooltip(): Manage tooltip visibility.
TooltipShowing: Fires before a tooltip appears.

User Interaction Options

Users can select or highlight series and their elements.

Hover

The chart highligts series elements when a mouse pointer is above the series. Use the series HoverMode property to select highlighted series elements.

The following example highlights a series and all its points when a user hovers the mouse pointer over the series:

Line Series - Hover

<DxPolarChart Data=@DataSource>
    <DxPolarChartLineSeries ArgumentField="@((DiscretePoint i) => i.Arg)"
                            ValueField="@((DiscretePoint i) => i.Day)"
                            HoverMode="ChartContinuousSeriesHoverMode.SeriesAndAllPoints">
    </DxPolarChartLineSeries>
</DxPolarChart>

Selection

Use PointSelectionMode and SeriesSelectionMode to allow users to select and deselect data points or the whole series with a click. You can specify the SelectionMode property at the series level to override component-level settings for the specific series.

Note

Since the Polar Chart component treats individual bars as points, the SeriesSelectionMode property is not applicable to bar, stacked bar, and side-by-side stacked bar series. Use the PointSelectionMode property instead.

In the following example, the Night series can be selected while the Day series is not selectable:

<DxPolarChart Data=@DataSource
              SeriesSelectionMode="ChartSelectionMode.Single">
    <DxPolarChartAreaSeries Name="Day"
                            ArgumentField="@((DiscretePoint i) => i.Arg)"
                            ValueField="@((DiscretePoint i) => i.Day)"
                            SelectionMode="ChartContinuousSeriesSelectionMode.None">
    </DxPolarChartAreaSeries>
    <DxPolarChartAreaSeries Name="Night"
                            Color="Color.MidnightBlue"
                            ArgumentField="@((DiscretePoint i) => i.Arg)"
                            ValueField="@((DiscretePoint i) => i.Night)">
    </DxPolarChartAreaSeries>
    <DxChartLegend Visible="false" />
</DxPolarChart>

Font Customization

Use the DxChartFont object to customize fonts for DxChartAxisTitle, DxPolarChartAxisLabel, DxChartSeriesLabel, or DxChartConstantLineLabel.

The following properties are available:

The following snippet customizes font settings of series labels:

<DxPolarChart Data=@DataSource>
    <DxPolarChartBarSeries Name="Day"
                           Color="Color.Sienna"
                           ArgumentField="@((DiscretePoint i) => i.Arg)"
                           ValueField="@((DiscretePoint i) => i.Day)">
    </DxPolarChartBarSeries>
    <DxPolarChartBarSeries Name="Night"
                           Color="Color.MidnightBlue"
                           ArgumentField="@((DiscretePoint i) => i.Arg)"
                           ValueField="@((DiscretePoint i) => i.Night)">
        <DxChartSeriesLabel Visible="true">
            <DxChartFont Weight="800" Color="lightgrey" />
        </DxChartSeriesLabel>
    </DxPolarChartBarSeries>
</DxPolarChart>

Font Customization