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.

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

    <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