Polar Line Chart in WinUI Charts (SfPolarChart)

10 Jul 20264 minutes to read

To render a line series in the polar chart, create an instance of the PolarLineSeries and add it to the Series collection property of SfPolarChart. To plot the series, the XBindingPath and YBindingPath properties must be configured, and the Label property can be set for legend purposes.

<chart:SfPolarChart>

    <!-- Configure additional chart elements -->
    <chart:SfPolarChart.Series>
        <chart:PolarLineSeries 
            ItemsSource="{Binding PlantDetails}" 
            XBindingPath="Direction"
            YBindingPath="Tree"/>

        <chart:PolarLineSeries
            ItemsSource="{Binding PlantDetails}" 
            XBindingPath="Direction"
            YBindingPath="Weed"/>

        <chart:PolarLineSeries 
            ItemsSource="{Binding PlantDetails}" 
            XBindingPath="Direction"
            YBindingPath="Flower"/>
    </chart:SfPolarChart.Series>

</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();

// Configure additional chart elements
PolarLineSeries series1 = new PolarLineSeries();
series1.XBindingPath = "Direction";
series1.YBindingPath = "Tree";
series1.ItemsSource = viewModel.PlantDetails;

PolarLineSeries series2 = new PolarLineSeries();
series2.XBindingPath = "Direction";
series2.YBindingPath = "Weed";
series2.ItemsSource = viewModel.PlantDetails;

PolarLineSeries series3 = new PolarLineSeries();
series3.XBindingPath = "Direction";
series3.YBindingPath = "Flower";
series3.ItemsSource = viewModel.PlantDetails;

chart.Series.Add(series1);
chart.Series.Add(series2);
chart.Series.Add(series3);

PolarLineSeries in WinUI chart

Grid line type

The GridLineType property is used to change the rendering type of axis grid lines. The default value of GridLineType is Circle. By changing the grid line type to Polygon, the polar chart can be shown similar to a radar chart, spider chart, or web chart.

<chart:SfPolarChart GridLineType="Polygon">

    <!-- Configure additional chart elements -->
    <chart:SfPolarChart.Series>
        <chart:PolarLineSeries 
            ItemsSource="{Binding PlantDetails}" 
            XBindingPath="Direction"
            YBindingPath="Tree"/>
    </chart:SfPolarChart.Series>

</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
chart.GridLineType= PolarChartGridLineType.Polygon;

// Configure additional chart elements
PolarLineSeries series = new PolarLineSeries();
series.XBindingPath = "Direction";
series.YBindingPath = "Tree";
series.ItemsSource = viewModel.PlantDetails;

chart.Series.Add(series);

Spider/Web chart

Closing Path

IsClosed property is used to render the series with or without a closed path. The default value of IsClosed is true.

<chart:SfPolarChart GridLineType="Polygon">

    <!-- Configure additional chart elements -->
    <chart:SfPolarChart.Series>
        <chart:PolarLineSeries
            ItemsSource="{Binding PlantDetails}" 
            XBindingPath="Direction"
            YBindingPath="Tree" 
            IsClosed="False"/>
    </chart:SfPolarChart.Series>

</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
chart.GridLineType= PolarChartGridLineType.Polygon;

// Configure additional chart elements
PolarLineSeries series = new PolarLineSeries();
series.XBindingPath = "Direction";
series.YBindingPath = "Tree";
series.ItemsSource = viewModel.PlantDetails;
series.IsClosed = false;

chart.Series.Add(series);

Closing path in WinUI chart