DxPolarChart<T>.Data Property

Specifies an object that supplies Polar Chart data.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.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