DxPolarChart<T> Class

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

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.

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:

1. 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.
2. Add the <DxPolarChart>…</DxPolarChart> markup to a .razor file.
3. Bind the component to data.
4. 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:

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

Razor

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

CSS

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

DataPoint.cs

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

ChartContinuousDataProvider.cs

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

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.

Note

When you bind a chart to DateTime values and set the Kind property to Utc, the component converts dates (for example, when it displays axis labels). This occurs because DxPolarChart is rendered on the client. To avoid such conversion, make sure your DateTime objects have their Kind properties set to Local or Unspecified.

You can also adjust the time difference to display dates correctly. The following code snippet demonstrates a possible solution:

public WeatherForecast[] GetForecast() {
    var localZone = TimeZoneInfo.Local;
    var localOffset = localZone.GetUtcOffset(DateTime.UtcNow);
    var cur = DateTime.UtcNow.Add(localOffset);

    var utcDates = new List<DateTime> { cur };
    var dates = new List<DateTime>();
    foreach (var utcDate in utcDates)
        dates.Add(new DateTime(utcDate.Ticks));
    // ...
}

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.

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:

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

The following code snippet hides overlapping labels:

Razor

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

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;

// ...
    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:

The DxPolarChartValueAxis class defines the value axis. The following image demonstrates value axis-related 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:

Razor

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

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

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

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>

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>

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

Hover Series Elements

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:

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

The <DxPolarChart> component also supports series and point selection in code. You can call the following methods:

SelectPoints | DeselectPoints

Select and deselect specific series points.

SelectSeries | DeselectSeries

Select and deselect a specific series.

You can also call the ClearSelectionAsync() method to reset selection in the entire <DxPolarChart> component.

To respond to selection changes, handle the SelectionChanged event.

Font Customization

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

The following properties are available:

• DxChartFont.Color
• DxChartFont.Family
• DxChartFont.Opacity
• DxChartFont.Size
• DxChartFont.Weight

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>

Troubleshooting

If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inheritance

Object

ComponentBase

DxComponentBase

DevExpress.Blazor.ClientComponents.Internal.ClientComponentBase

DevExpress.Blazor.ClientComponents.Internal.ClientComponentJSInterop

DxChartBase

DxPolarChart<T>