menu

WinUI

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfPolarChart - WinUI API Reference | Syncfusion

    Show / Hide Table of Contents

    Class SfPolarChart

    Renders polar line and area charts for data representation and enhanced user interface visualization.

    Inheritance
    System.Object
    ChartBase
    SfPolarChart
    Implements
    System.IDisposable
    System.ComponentModel.INotifyPropertyChanged
    Inherited Members
    ChartBase.Dispose()
    ChartBase.Header
    ChartBase.HeaderProperty
    ChartBase.HorizontalHeaderAlignment
    ChartBase.HorizontalHeaderAlignmentProperty
    ChartBase.InteractiveBehavior
    ChartBase.InteractiveBehaviorProperty
    ChartBase.Legend
    ChartBase.LegendProperty
    ChartBase.MeasureOverride(Size)
    ChartBase.OnDoubleTapped(DoubleTappedRoutedEventArgs)
    ChartBase.OnGotFocus(RoutedEventArgs)
    ChartBase.OnHolding(HoldingRoutedEventArgs)
    ChartBase.OnKeyDown(KeyRoutedEventArgs)
    ChartBase.OnKeyUp(KeyRoutedEventArgs)
    ChartBase.OnLostFocus(RoutedEventArgs)
    ChartBase.OnManipulationCompleted(ManipulationCompletedRoutedEventArgs)
    ChartBase.OnManipulationDelta(ManipulationDeltaRoutedEventArgs)
    ChartBase.OnManipulationInertiaStarting(ManipulationInertiaStartingRoutedEventArgs)
    ChartBase.OnManipulationStarted(ManipulationStartedRoutedEventArgs)
    ChartBase.OnManipulationStarting(ManipulationStartingRoutedEventArgs)
    ChartBase.OnPointerCanceled(PointerRoutedEventArgs)
    ChartBase.OnPointerCaptureLost(PointerRoutedEventArgs)
    ChartBase.OnPointerEntered(PointerRoutedEventArgs)
    ChartBase.OnPointerExited(PointerRoutedEventArgs)
    ChartBase.OnPointerMoved(PointerRoutedEventArgs)
    ChartBase.OnPointerPressed(PointerRoutedEventArgs)
    ChartBase.OnPointerReleased(PointerRoutedEventArgs)
    ChartBase.OnPointerWheelChanged(PointerRoutedEventArgs)
    ChartBase.OnRightTapped(RightTappedRoutedEventArgs)
    ChartBase.OnTapped(TappedRoutedEventArgs)
    ChartBase.PropertyChanged
    ChartBase.ResumeSeriesNotification()
    ChartBase.SeriesBoundsChanged
    ChartBase.SeriesClipRect
    ChartBase.SuspendSeriesNotification()
    ChartBase.TooltipBehavior
    ChartBase.TooltipBehaviorProperty
    ChartBase.VerticalHeaderAlignment
    ChartBase.VerticalHeaderAlignmentProperty
    ChartBase.VisibleSeriesProperty
    Namespace: Syncfusion.UI.Xaml.Charts
    Assembly: Syncfusion.Chart.WinUI.dll
    Syntax
    public class SfPolarChart : ChartBase, IDisposable, INotifyPropertyChanged
    Remarks

    Polar chart control is used to visualize the data in terms of values and angles.

    SfPolarChart class properties provides an option to add the series collection, allows to customize the chart elements such as legend, data label, and tooltip features.

    Series

    ChartSeries is the visual representation of data. SfPolarChart offers PolarAreaSeries and PolarLineSeries.

    To render a series, create an instance of required series class, and add it to the Series collection.

    • MainPage.xaml
    • MainPage.xaml.cs
    • ViewModel.cs
     
    <chart:SfPolarChart>
    
           <chart:SfPolarChart.DataContext>
               <local:ViewModel/>
           </chart:SfPolarChart.DataContext>
    
           <chart:PolarAreaSeries ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"/>
    </chart:SfPolarChart>
    SfPolarChart chart = new SfPolarChart();
    
    ViewModel viewModel = new ViewModel();
    chart.DataContext = viewModel;
    
    PolarAreaSeries series = new PolarAreaSeries()
    {
        ItemsSource = viewmodel.Data,
        XBindingPath = "XValue",
        YBindingPath = "YValue"
    };
    chart.Series.Add(series);
    public ObservableCollection<Model> Data { get; set; }
    
    public ViewModel()
    {
       Data = new ObservableCollection<Model>();
       Data.Add(new Model() { XValue = "A", YValue = 100 });
       Data.Add(new Model() { XValue = "B", YValue = 150 });
       Data.Add(new Model() { XValue = "C", YValue = 110 });
       Data.Add(new Model() { XValue = "D", YValue = 230 });
    }

    Legend

    The Legend contains list of data points in chart series. The information provided in each legend item helps to identify the corresponding data point in chart series. The Series XBindingPath property value will be displayed in the associated legend item.

    To render a legend, create an instance of ChartLegend, and assign it to the Legend property.

    • MainPage.xaml
    • MainPage.xaml.cs
     
    <chart:SfPolarChart>
    
           <chart:SfPolarChart.DataContext>
               <local:ViewModel/>
           </chart:SfPolarChart.DataContext>
    
           <chart:SfPolarChart.Legend>
               <chart:ChartLegend/>
           </chart:SfPolarChart.Legend>
    
           <chart:PolarAreaSeries Label="Series 1" ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"/>
    </chart:SfCircularChart>
    SfPolarChart chart = new SfPolarChart();
    
    ViewModel viewModel = new ViewModel();
    chart.DataContext = viewModel;
    
    chart.Legend = new ChartLegend();
    
    PolarAreaSeries series = new PolarAreaSeries()
    {
        ItemsSource = viewmodel.Data,
        XBindingPath = "XValue",
        YBindingPath = "YValue",
        Label="Series 1"
    };
    chart.Series.Add(series);

    Data Label

    Data labels are used to display values related to a chart segment. To render the data labels, you need to enable the property as true in ChartSeries class.

    To customize the chart data labels alignment, placement and label styles, need to create an instance of PolarDataLabelSettings and set to the property.

    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfPolarChart>
    
           <chart:SfPolarChart.DataContext>
               <local:ViewModel/>
           </chart:SfPolarChart.DataContext>
    
           < chart:PolarAreaSeries ShowDataLabels = "True"
                                   ItemsSource="{Binding Data}"
                                   XBindingPath="XValue"
                                   YBindingPath="YValue"/>
    </chart:SfPolarChart>
    SfPolarChart chart = new SfPolarChart();
    
    ViewModel viewModel = new ViewModel();
    chart.DataContext = viewModel;
    
    PolarAreaSeries series = new PolarAreaSeries()
    {
        ItemsSource = viewmodel.Data,
        XBindingPath = "XValue",
        YBindingPath = "YValue",
        ShowDataLabels = true
    };
    chart.Series.Add(series);

    Constructors

    SfPolarChart()

    Initializes a new instance of the SfPolarChart class.

    Declaration
    public SfPolarChart()

    Fields

    GridLineTypeProperty

    Identifies the GridLineType dependency property.

    Declaration
    public static readonly DependencyProperty GridLineTypeProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for GridLineType dependency property.

    PaletteBrushesProperty

    Identifies the PaletteBrushes dependency property.

    Declaration
    public static readonly DependencyProperty PaletteBrushesProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for PaletteBrushes dependency property.

    PrimaryAxisProperty

    Identifies the PrimaryAxis dependency property.

    Declaration
    public static readonly DependencyProperty PrimaryAxisProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for PrimaryAxis dependency property.

    SecondaryAxisProperty

    Identifies the SecondaryAxis dependency property.

    Declaration
    public static readonly DependencyProperty SecondaryAxisProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for SecondaryAxis dependency property.

    SeriesProperty

    Identifies the Series dependency property.

    Declaration
    public static readonly DependencyProperty SeriesProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for Series dependency property.

    StartAngleProperty

    Identifies the StartAngle dependency property.

    Declaration
    public static readonly DependencyProperty StartAngleProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for StartAngle dependency property.

    Properties

    GridLineType

    Gets or sets the gridline type value that can be used to modify the polar chart grid line type to Polygon or Circle.

    Declaration
    public PolarChartGridLineType GridLineType { get; set; }
    Property Value
    Type Description
    PolarChartGridLineType

    It accepts the PolarChartGridLineType value and its default value is Circle.

    Examples
    • MainWindow.xaml
    • MainWindow.cs
        <chart:SfPolarChart GridLineType="Polygon">
    
        <!--omitted for brevity-->
    
             <chart:PolarAreaSeries ItemsSource="{Binding Data}"
                                    XBindingPath="XValue"
                                    YBindingPath="YValue"/>
    
        </chart:SfPolarChart>
        SfPolarChart chart = new SfPolarChart();
        chart.GridLineType = PolarChartGridLineType.Polygon;
        ViewModel viewmodel = new ViewModel();
    
        // omitted for brevity
        PolarAreaSeries series = new PolarAreaSeries();
        series.ItemsSource = viewmodel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);

    PaletteBrushes

    Gets or sets the list of brushes that can be used to customize the appearance of the chart.

    Declaration
    public IList<Brush> PaletteBrushes { get; set; }
    Property Value
    Type Description
    System.Collections.Generic.IList<Microsoft.UI.Xaml.Media.Brush>

    This property accepts a list of brushes as input and comes with a set of predefined brushes by default.

    Remarks

    It allows custom brushes, and gradient brushes to customize the appearance.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
    <Grid>
    <Grid.Resources>
       <BrushCollection x:Key="customBrushes">
          <SolidColorBrush Color="#4dd0e1"/>
          <SolidColorBrush Color="#26c6da"/>
          <SolidColorBrush Color="#00bcd4"/>
          <SolidColorBrush Color="#00acc1"/>
          <SolidColorBrush Color="#0097a7"/>
          <SolidColorBrush Color="#00838f"/>
       </BrushCollection>
    </Grid.Resources>
    
    <chart:SfPolarChart PaletteBrushes="{StaticResource customBrushes}">
    
    <!--omitted for brevity-->
    
    </chart:SfPolarChart>
    </Grid>
    SfPolarChart chart = new SfPolarChart();
    ViewModel viewModel = new ViewModel();
    List<Brush> CustomBrushes = new List<Brush>();
    CustomBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 77, 208, 225)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 38, 198, 218)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 188, 212)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 172, 193)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 151, 167)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 131, 143)));
    
    // omitted for brevity
    
    chart.PaletteBrushes = CustomBrushes;
    
    this.Content = chart;

    PrimaryAxis

    Gets or sets the x- axis for SfPolarChart.

    Declaration
    public ChartAxis PrimaryAxis { get; set; }
    Property Value
    Type Description
    ChartAxis

    It accepts the ChartAxis value.

    Examples
    • MainWindow.xaml
    • MainWindow.cs
        <chart:SfPolarChart>
    
              <chart:SfPolarChart.PrimaryAxis>
                  <chart:NumericalAxis/>
              </chart:SfPolarChart.NumericalAxis>
    
              <chart:SfPolarChart.SecondaryAxis>
                  <chart:NumericalAxis/>
              </chart:SfPolarChart.SecondaryAxis>
    
        </chart:SfPolarChart>
        SfPolarChart chart = new SfPolarChart();
    
        chart.PrimaryAxis = new NumericalAxis();
        chart.SecondaryAxis = new NumericalAxis();

    SecondaryAxis

    Gets or sets the y-axis for SfPolarChart.

    Declaration
    public RangeAxisBase SecondaryAxis { get; set; }
    Property Value
    Type Description
    RangeAxisBase

    It accepts the RangeAxisBase value.

    Examples
    • MainWindow.xaml
    • MainWindow.cs
        <chart:SfPolarChart>
    
              <chart:SfPolarChart.PrimaryAxis>
                  <chart:NumericalAxis/>
              </chart:SfPolarChart.NumericalAxis>
    
              <chart:SfPolarChart.SecondaryAxis>
                  <chart:NumericalAxis/>
              </chart:SfPolarChart.SecondaryAxis>
    
        </chart:SfPolarChart>
        SfPolarChart chart = new SfPolarChart();
    
        chart.PrimaryAxis = new NumericalAxis();
        chart.SecondaryAxis = new NumericalAxis();

    Series

    Gets or sets a collection of series to be added to the chart.

    Declaration
    public PolarSeriesCollection Series { get; set; }
    Property Value
    Type Description
    PolarSeriesCollection

    It accepts the PolarSeriesCollection value.

    Remarks

    To render a series, create an instance of required series class, and add it to the collection.

    Examples
    • MainWindow.xaml
    • MainWindow.cs
        <chart:SfPolarChart>
    
             <!--omitted for brevity-->
    
             <chart:PolarAreaSeries ItemsSource="{Binding Data}" 
                                    XBindingPath="XValue" 
                                    YBindingPath="YValue"/>
    
        </chart:SfPolarChart>
        SfPolarChart chart = new SfPolarChart();
        ViewModel viewmodel = new ViewModel();
    
        // omitted for brevity
        PolarAreaSeries series = new PolarAreaSeries();
        series.ItemsSource = viewmodel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);

    StartAngle

    Gets or sets the value that can be used to modify the series starting angle.

    Declaration
    public ChartPolarAngle StartAngle { get; set; }
    Property Value
    Type Description
    ChartPolarAngle

    It accepts the ChartPolarAngle value and it has the default value of Rotate270.

    Remarks

    It allows for modifying the series rendering position on four degrees: 0, 90, 180, and 270.

    Examples
    • MainWindow.xaml
    • MainWindow.cs
        <chart:SfPolarChart StartAngle="Rotate0">
    
        <!--omitted for brevity-->
    
             <chart:PolarAreaSeries ItemsSource="{Binding Data}" 
                                    XBindingPath="XValue" 
                                    YBindingPath="YValue"/>
    
        </chart:SfPolarChart>
        SfPolarChart chart = new SfPolarChart();
        chart.StartAngle = ChartPolarAngle.Rotate0;
        ViewModel viewmodel = new ViewModel();
    
        // omitted for brevity
        PolarAreaSeries series = new PolarAreaSeries();
        series.ItemsSource = viewmodel.Data;
        series.XBindingPath = "XValue";
        series.YBindingPath = "YValue";
        chart.Series.Add(series);

    Methods

    OnApplyTemplate()

    Declaration
    protected override void OnApplyTemplate()
    Overrides
    ChartBase.OnApplyTemplate()

    Implements

    System.IDisposable
    System.ComponentModel.INotifyPropertyChanged
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved