Syncfusion Feedback


.NET MAUI Polar Charts Polar Area Chart

Overview

The .NET MAUI polar area chart displays data points that are visualized as areas. This type of chart can be configured with numeric, category, and date-time axes.

.NET MAUI Polar Area Chart documentation

.NET MAUI polar area chart.

Key features

.NET MAUI polar area chart with customized border and color.

UI styling

Customize the color and border of the chart by utilizing the built-in APIs to create a visually distinctive appearance.

.NET MAUI polar area chart with data labels.

Data labels

Data labels display information about data points. Customize the foreground, border, and background of the labels. You can also rotate a data label to a specified angle.

.NET MAUI polar area chart with rendering position.

Rendering position

Customize the start angle of a polar chart to visualize data from a different perspective.

.NET MAUI polar area chart with closing chart.

Closing path

The series can be displayed with or without a closed path.

Code example

  1. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
  2.         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  3.         x:Class="ChartExample.MainPage"
  4.         xmlns:local="clr-namespace:ChartExample"
  5.         xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
  6.        
  7.     <Grid>
  8.         <chart:SfPolarChart HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
  9.             <!--Setting BindingContext-->
  10.             <chart:SfPolarChart.BindingContext>
  11.                 <local:ViewModel/>
  12.             </chart:SfPolarChart.BindingContext>
  13.  
  14.             <!--Initialize the primary axis for the .NET MAUI Polar Chart.-->
  15.             <chart:SfPolarChart.PrimaryAxis>
  16.                 <chart:CategoryAxis/>
  17.             </chart:SfPolarChart.PrimaryAxis>
  18.  
  19.             <!--Initialize the secondary axis for the .NET MAUI Polar Chart.-->
  20.             <chart:SfPolarChart.SecondaryAxis>
  21.                 <chart:NumericalAxis/>
  22.             </chart:SfPolarChart.SecondaryAxis>
  23.  
  24.             <chart:SfPolarChart.Legend>
  25.                 <chart:ChartLegend/>
  26.             </chart:SfPolarChart.Legend>
  27.            
  28.             <!--Adding polar area series to the .NET MAUI Polar Chart.-->
  29.             <chart:PolarAreaSeries 
  30.                         ItemsSource="{Binding PlantDetails}" 
  31.                         XBindingPath="Direction"
  32.                         YBindingPath="Tree"
  33.                         Label="Tree">
  34.             </chart:PolarAreaSeries> 
  35.  
  36.             <chart:PolarAreaSeries 
  37.                         ItemsSource="{Binding PlantDetails}" 
  38.                         XBindingPath="Direction"
  39.                         YBindingPath="Weed"
  40.                         Label="Weed">
  41.             </chart:PolarAreaSeries> 
  42.  
  43.              <chart:PolarAreaSeries 
  44.                         ItemsSource="{Binding PlantDetails}" 
  45.                         XBindingPath="Direction"
  46.                         YBindingPath="Flower"
  47.                         Label="Flower">
  48.             </chart:PolarAreaSeries> 
  49.         </chart:SfPolarChart>
  50.     </Grid>
  51. </ContentPage>
  1. public class PlantData
  2. {
  3.     public string Direction { get; set; }
  4.  
  5.     public double Tree { get; set; }
  6.  
  7.     public double Weed { get; set; }
  8.  
  9.     public double Flower { get; set; }
  10.  
  11.     public PlantData(string direction, double tree, double weed, double flower)
  12.     {
  13.         Direction = direction;
  14.         Tree = tree;
  15.         Weed = weed;
  16.         Flower = flower;
  17.     }
  18. }
  19.  
  20. public class ViewModel
  21. {
  22.     public ObservableCollection<PlantData> PlantDetails { get; set; }
  23.  
  24.     public ViewModel()
  25.     {
  26.         PlantDetails = new ObservableCollection<PlantData>()
  27.         {
  28.             new PlantData(){ Direction = "North", Tree = 80, Weed = 63, Flower = 42},
  29.             new PlantData(){ Direction = "NorthEast", Tree = 85, Weed = 70, Flower = 40},
  30.             new PlantData(){ Direction = "East", Tree = 78 , Weed = 45, Flower = 25},
  31.             new PlantData(){ Direction = "SouthEast", Tree = 90 , Weed = 70, Flower = 40},
  32.             new PlantData(){ Direction = "South", Tree = 78 , Weed = 47, Flower = 20},
  33.             new PlantData(){ Direction = "SouthWest", Tree = 83 , Weed = 65, Flower = 45},
  34.             new PlantData(){ Direction = "West", Tree = 79 , Weed = 58, Flower = 40},
  35.             new PlantData(){ Direction = "NorthWest", Tree = 88 , Weed = 73, Flower = 28}
  36.         };
  37.     }
  38. }

Learning resources

Navigate to GitHub code used to configure the .NET MAUI polar area chart.

GitHub Code

The .NET MAUI polar area chart’s configuration code is available on GitHub.

Navigate to the options available in the user guide to customize the .NET MAUI polar area chart.

.NET MAUI Polar Area Chart User Guide

Learn more about the available options for customizing the .NET MAUI polar area chart.

Navigate to the API references documentation of the .NET MAUI polar area chart.

.NET MAUI Polar Area Chart API References

Explore the .NET MAUI polar area chart APIs.

Scroll up icon
Chat with us