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

Run Demo: Polar and Radar - Continuous Data

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

Run Demo: Polar Chart - Continuous Data

Run Demo: Polar Chart - Discrete Data

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. Refer to the following topic for more information about available series types: Series Types in Blazor Charts.

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.

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.

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

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.

For more information on how to customize series labels, refer to the following topic: Labels in Blazor Charts.

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.

For more information on how to configure axes and their visual elements, refer to the following topic: Axes.

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

Refer to the following section for more information about legend: Descriptive Elements - 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

Refer to the following section for more information about titles: Descriptive Elements - Titles and Subtitles.

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

Refer to the following section for more information about titles: Descriptive Elements - Tooltips.

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