public class SfPolarChart : ChartBase, IContentView, IView, IElement, ITransform, IPadding, ICrossPlatformLayout, IChart, ITapGestureListener, IGestureListener, ITouchListener, IParentThemeElement, IThemeElement

Remarks

Polar chart control visualizes the data in terms of values and angles.

SfPolarChart class properties allows adding the series collection, allowing customization of the chart elements such as legend, data label, and tooltip features.

Axis

ChartAxis is used to locate a data point inside the chart area. Charts typically have two axes that are used to measure and categorize data. SecondaryAxis(Y) axis always uses numerical scale. PrimaryAxis(X) axis supports the Category, Numeric, Date time and Logarithmic.

To render an axis, the chart axis instance has to be added in chart’s PrimaryAxis and SecondaryAxis collection as per the following code snippet.

MainPage.xaml
MainPage.xaml.cs

<chart:SfPolarChart>

        <chart:SfPolarChart.BindingContext>
            <local:ViewModel/>
        </chart:SfPolarChart.BindingContext>

        <chart:SfPolarChart.PrimaryAxis>
            <chart:NumericalAxis/>
        </chart:SfPolarChart.PrimaryAxis>

        <chart:SfPolarChart.SecondaryAxis>
            <chart:NumericalAxis/>
        </chart:SfPolarChart.SecondaryAxis>

</chart:SfPolarChart>

SfPolarChart chart = new SfPolarChart();

ViewModel viewModel = new ViewModel();
chart.BindingContext = viewModel;

NumericalAxis primaryAxis = new NumericalAxis();
chart.PrimaryAxis = primaryAxis;	

NumericalAxis secondaryAxis = new NumericalAxis();
chart.SecondaryAxis = secondaryAxis;

Series

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

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

 
<chart:SfPolarChart>

       <chart:SfPolarChart.BindingContext>
           <local:ViewModel/>
       </chart:SfPolarChart.BindingContext>

       <chart:SfPolarChart.PrimaryAxis>
           <chart:NumericalAxis/>
       </chart:SfPolarChart.PrimaryAxis>

       <chart:SfPolarChart.SecondaryAxis>
           <chart:NumericalAxis/>
       </chart:SfPolarChart.SecondaryAxis>

       <chart:PolarLineSeries ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
       <chart:PolarLineSeries ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2"/>

</chart:SfPolarChart>

SfPolarChart chart = new SfPolarChart();

ViewModel viewModel = new ViewModel();
chart.BindingContext = viewModel;

NumericalAxis primaryAxis = new NumericalAxis();
chart.PrimaryAxis = primaryAxis;	

NumericalAxis secondaryAxis = new NumericalAxis();
chart.SecondaryAxis = secondaryAxis;

PolarLineSeries series1 = new PolarLineSeries()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue1"
};
chart.Series.Add(series1);

PolarLineSeries series2 = new PolarLineSeries()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue2"
};
chart.Series.Add(series2);

public ObservableCollection<Model> Data { get; set; }

public ViewModel()
{
   Data = new ObservableCollection<Model>();
   Data.Add(new Model() { XValue = A, YValue1 = 100, YValue2 = 110 });
   Data.Add(new Model() { XValue = B, YValue1 = 150, YValue2 = 100 });
   Data.Add(new Model() { XValue = C, YValue1 = 110, YValue2 = 130 });
   Data.Add(new Model() { XValue = D, YValue1 = 230, YValue2 = 180 });
}

Legend

The information provided in each legend item helps to identify the corresponding chart series. The Series Label property text 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.BindingContext>
           <local:ViewModel/>
       </chart:SfPolarChart.BindingContext>

       <chart:SfPolarChart.Legend>
           <chart:ChartLegend/>
       </chart:SfPolarChart.Legend>

       <chart:SfPolarChart.PrimaryAxis>
           <chart:NumericalAxis/>
       </chart:SfPolarChart.PrimaryAxis>

       <chart:SfPolarChart.SecondaryAxis>
           <chart:NumericalAxis/>
       </chart:SfPolarChart.SecondaryAxis>

       <chart:PolarLineSeries Label="Singapore" ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
       <chart:PolarLineSeries Label="Spain" ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2"/>

</chart:SfPolarChart>

SfPolarChart chart = new SfPolarChart();

ViewModel viewModel = new ViewModel();
chart.BindingContext = viewModel;

chart.Legend = new ChartLegend();

NumericalAxis primaryAxis = new NumericalAxis();
chart.PrimaryAxis = primaryAxis;	

NumericalAxis secondaryAxis = new NumericalAxis();
chart.SecondaryAxis = secondaryAxis;

PolarLineSeries series1 = new PolarLineSeries()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue1",
    Label = "Singapore"
};
chart.Series.Add(series1);

PolarLineSeries series2 = new PolarLineSeries()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue2",
    Label = "Spain"
};
chart.Series.Add(series2);

Tooltip

Tooltip displays information while tapping or mouse hovering on the segment. To display the tooltip on the chart, set the EnableTooltip property as true in ChartSeries.

To customize the appearance of the tooltip elements like Background, TextColor and Font, create an instance of ChartTooltipBehavior class, modify the values, and assign it to the chart’s TooltipBehavior property.

MainPage.xaml
MainPage.xaml.cs

<chart:SfPolarChart>

        <chart:SfPolarChart.BindingContext>
            <local:ViewModel/>
        </chart:SfPolarChart.BindingContext>

        <chart:SfPolarChart.TooltipBehavior>
            <chart:ChartTooltipBehavior/>
        </chart:SfPolarChart.TooltipBehavior>

        <chart:SfPolarChart.PrimaryAxis>
            <chart:NumericalAxis/>
        </chart:SfPolarChart.PrimaryAxis>

        <chart:SfPolarChart.SecondaryAxis>
            <chart:NumericalAxis/>
        </chart:SfPolarChart.SecondaryAxis>

        <chart:PolarLineSeries EnableTooltip = "True" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
        <chart:PolarLineSeries EnableTooltip = "True" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2"/>

</chart:SfPolarChart>

SfPolarChart chart = new SfPolarChart();

ViewModel viewModel = new ViewModel();
chart.BindingContext = viewModel;

chart.TooltipBehavior = new ChartTooltipBehavior();

NumericalAxis primaryAxis = new NumericalAxis();
chart.PrimaryAxis = primaryAxis;	

NumericalAxis secondaryAxis = new NumericalAxis();
chart.SecondaryAxis = secondaryAxis;

PolarLineSeries series1 = new PolarLineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue1",
   EnableTooltip = true
};
chart.Series.Add(series1);

PolarLineSeries series2 = new PolarLineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue2",
   EnableTooltip = true
};
chart.Series.Add(series2);

Data Label

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

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

MainPage.xaml
MainPage.xaml.cs

<chart:SfPolarChart>

       <chart:SfPolarChart.BindingContext>
           <local:ViewModel/>
       </chart:SfPolarChart.BindingContext>

       <chart:SfPolarChart.PrimaryAxis>
           <chart:NumericalAxis/>
       </chart:SfPolarChart.PrimaryAxis>

       <chart:SfPolarChart.SecondaryAxis>
           <chart:NumericalAxis/>
       </chart:SfPolarChart.SecondaryAxis>

        <chart:PolarAreaSeries ShowDataLabels ="True" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>

</chart:SfPolarChart>

SfPolarChart chart = new SfPolarChart();

ViewModel viewModel = new ViewModel();
chart.BindingContext = viewModel;

NumericalAxis primaryAxis = new NumericalAxis();
chart.PrimaryAxis = primaryAxis;	

NumericalAxis secondaryAxis = new NumericalAxis();
chart.SecondaryAxis = secondaryAxis;

PolarAreaSeries series = new PolarAreaSeries()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue1",
    ShowDataLabels = true
};
chart.Series.Add(series);

Constructors

SfPolarChart()

Initializes a new instance of the SfPolarChart class.

Declaration

public SfPolarChart()

Fields

GridLineTypeProperty

Identifies the GridLineType bindable property.

Declaration

public static readonly BindableProperty GridLineTypeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the GridLineType bindable property determines the type of grid lines used in the polar chart.

PaletteBrushesProperty

Identifies the PaletteBrushes bindable property.

Declaration

public static readonly BindableProperty PaletteBrushesProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the PaletteBrushes bindable property determines the palette brushes for the polar chart.

PrimaryAxisProperty

Identifies the PrimaryAxis bindable property.

Declaration

public static readonly BindableProperty PrimaryAxisProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the PrimaryAxis bindable property determines the primary axis of the polar chart.

SecondaryAxisProperty

Identifies the SecondaryAxis bindable property.

Declaration

public static readonly BindableProperty SecondaryAxisProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the SecondaryAxis bindable property determines the secondary axis of the polar chart.

SeriesProperty

Identifies the Series bindable property.

Declaration

public static readonly BindableProperty SeriesProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the Series bindable property determines the collection of series to be displayed in the polar chart.

StartAngleProperty

Identifies the StartAngle bindable property.

Declaration

public static readonly BindableProperty StartAngleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the StartAngle bindable property determines the start angle of the polar chart.

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

<!-- ... Eliminated for simplicity-->

 <chart:PolarLineSeries ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"/>        

</chart:SfPolarChart>

SfPolarChart chart = new SfPolarChart();
chart.GridLineType = PolarChartGridLineType.Polygon;

 // Eliminated for simplicity

ViewModel viewModel = new ViewModel();

PolarLineSeries polarLineSeries = new PolarLineSeries();
polarLineSeries.ItemsSource = viewModel.Data;
polarLineSeries.XBindingPath = "XValue";
polarLineSeries.YBindingPath = "YValue";
chart.Series.Add(polarLineSeries);

PaletteBrushes

Gets or sets the palette brushes for the chart.

Declaration

public IList<Brush> PaletteBrushes { get; set; }

Property Value

Type	Description
System.Collections.Generic.IList<Microsoft.Maui.Controls.Brush>	This property takes the list of Microsoft.Maui.Controls.Brush, and comes with a set of predefined brushes by default.

Examples

Xaml
C#

    <chart:SfPolarChart PaletteBrushes = "{Binding CustomBrushes}">

    <!-- ... Eliminated for simplicity-->

         <chart:PolarLineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1" />
         <chart:PolarLineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2" />
         <chart:PolarLineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue3" />

    </chart:SfPolarChart>

    SfPolarChart chart = new SfPolarChart();
    ViewModel viewModel = new ViewModel();
    List<Brush> CustomBrushes = new List<Brush>();
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(77, 208, 225)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(38, 198, 218)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 188, 212)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 172, 193)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 151, 167)));
    CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 131, 143)));

    chart.PaletteBrushes = CustomBrushes;
    // Eliminated for simplicity

    PolarLineSeries polarLineSeries1 = new PolarLineSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue1
    };
    PolarLineSeries polarLineSeries2 = new PolarLineSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue2"
    };
    PolarLineSeries polarLineSeries3 = new PolarLineSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue3"
    };

    chart.Series.Add(polarLineSeries1);
    chart.Series.Add(polarLineSeries2);
    chart.Series.Add(polarLineSeries3);

PrimaryAxis

Gets or sets the primary axis in the chart.

Declaration

public ChartAxis PrimaryAxis { get; set; }

Property Value

Type	Description
ChartAxis	It accepts the ChartAxis value.

Examples

Xaml
C#

<chart:SfPolarChart>

        <chart:SfPolarChart.BindingContext>
            <local:ViewModel/>
        </chart:SfPolarChart.BindingContext>

        <chart:SfPolarChart.PrimaryAxis>
            <chart:NumericalAxis/>
        </chart:SfPolarChart.PrimaryAxis>

</chart:SfPolarChart>

SfPolarChart chart = new SfPolarChart();

ViewModel viewModel = new ViewModel();
chart.BindingContext = viewModel;

NumericalAxis primaryAxis = new NumericalAxis();
chart.PrimaryAxis = primaryAxis;

SecondaryAxis

Gets or sets the collection of vertical axis in the chart.

Declaration

public RangeAxisBase SecondaryAxis { get; set; }

Property Value

Type	Description
RangeAxisBase	It accepts the RangeAxisBase value.

Examples

Xaml
C#

<chart:SfPolarChart>

        <chart:SfPolarChart.BindingContext>
            <local:ViewModel/>
        </chart:SfPolarChart.BindingContext>

        <chart:SfPolarChart.SecondaryAxis>
            <chart:NumericalAxis/>
        </chart:SfPolarChart.SecondaryAxis>

</chart:SfPolarChart>

SfPolarChart chart = new SfPolarChart();

ViewModel viewModel = new ViewModel();
chart.BindingContext = viewModel;

NumericalAxis secondaryAxis = new NumericalAxis();
chart.SecondaryAxis = secondaryAxis;

Series

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

Declaration

public ChartPolarSeriesCollection Series { get; set; }

Property Value

Type	Description
ChartPolarSeriesCollection	This property takes ChartPolarSeriesCollection instance as value.

Remarks

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

Examples

    <chart:SfPolarChart>

       <chart:SfPolarChart.BindingContext>
           <local:ViewModel/>
       </chart:SfPolarChart.BindingContext>

       <chart:SfPolarChart.PrimaryAxis>
           <chart:NumericalAxis/>
       </chart:SfPolarChart.PrimaryAxis>

       <chart:SfPolarChart.SecondaryAxis>
           <chart:NumericalAxis/>
       </chart:SfPolarChart.SecondaryAxis>

       <chart:SfPolarChart.Series>
           <chart:PolarLineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
           <chart:PolarLineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2"/>  
       </chart:SfPolarChart.Series>

    </chart:SfPolarChart>

    SfPolarChart chart = new SfPolarChart();

    ViewModel viewModel = new ViewModel();
    chart.BindingContext = viewModel;

    NumericalAxis primaryAxis = new NumericalAxis();
    chart.PrimaryAxis = primaryAxis;	

    NumericalAxis secondaryAxis = new NumericalAxis();
    chart.SecondaryAxis = secondaryAxis;

    PolarLineSeries series1 = new PolarLineSeries()
    {
        ItemsSource = viewModel.Data,
        XBindingPath = "XValue",
        YBindingPath = "YValue1"
    };
    chart.Series.Add(series1);

    PolarLineSeries series2 = new PolarLineSeries()
    {
        ItemsSource = viewModel.Data,
        XBindingPath = "XValue",
        YBindingPath = "YValue2"
    };
    chart.Series.Add(series2);

public ObservableCollection<Model> Data { get; set; }

public ViewModel()
{
   Data = new ObservableCollection<Model>();
   Data.Add(new Model() { XValue = 10, YValue1 = 100, YValue2 = 110 });
   Data.Add(new Model() { XValue = 20, YValue1 = 150, YValue2 = 100 });
   Data.Add(new Model() { XValue = 30, YValue1 = 110, YValue2 = 130 });
   Data.Add(new Model() { XValue = 40, YValue1 = 230, YValue2 = 180 });
}

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.

Examples

Xaml
C#

<chart:SfPolarChart StartAngle="Rotate90">

<!-- ... Eliminated for simplicity-->

<chart:PolarLineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1" />
<chart:PolarLineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2" />

</chart:SfPolarChart>

SfPolarChart chart = new SfPolarChart();
chart.StartAngle = ChartPolarAngle.Rotate90;

// Eliminated for simplicity

PolarLineSeries polarLineSeries1 = new PolarLineSeries()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue1
};
    PolarLineSeries polarLineSeries2 = new PolarLineSeries()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue2"
};

  chart.Series.Add(polarLineSeries1);
  chart.Series.Add(polarLineSeries2);

Implements

Microsoft.Maui.IContentView

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout