DxPolarChart<T>.Data Property

Specifies an object that supplies Polar Chart data.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public IEnumerable<T> Data { get; set; }

Property Value

Type	Description
IEnumerable<T>	A data source.

Remarks

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

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));
    // ...
}