Skip to content

Commit 59d81e4

Browse files
author
DevakumarD
authored
Update README.md
1 parent 7cf4b0a commit 59d81e4

File tree

1 file changed

+18
-14
lines changed

1 file changed

+18
-14
lines changed

README.md

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
# How-to-create-a-Pie-Chart-in-.NET-MAUI
1+
# How to create a Pie Chart in .NET MAUI (SfCircularChart)
22

33
A .NET MAUI Pie charts visual representation of percentages at a certain point in time and it can be used to show percentages of a whole. This section explains how to create a beautiful .NET MAUI Pie Charts.
44

5-
![.NET MAUI Pie Chart](https://user-images.githubusercontent.com/13678478/137482460-7e72b3ac-70de-4619-b314-7cd8b51d5d59.png)
6-
75
## Register the handler.
8-
Syncfusion.Maui.Core nuget is a dependent package for all Syncfusion controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion core. For more details refer this link.
6+
Syncfusion.Maui.Core nuget is a dependent package for all Syncfusion controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion core. For more details refer this [link](https://help.syncfusion.com/maui/cartesian-charts/getting-started#register-the-handler).
97

108
## Initialize Chart
11-
Import the SfCircularChart namespace as shown below.
9+
Import the [SfCircularChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCircularChart.html?tabs=tabid-1) namespace as shown below.
1210

1311
**[XAML]**
1412

@@ -73,9 +71,9 @@ public class ViewModel
7371
}
7472
}
7573
```
76-
Set the ViewModel instance as the BindingContext of chart; this is done to bind properties of ViewModel to SfCircularChart.
74+
Set the **ViewModel** instance as the **BindingContext** of chart; this is done to bind properties of **ViewModel** to SfCircularChart.
7775

78-
> Note: Add namespace of ViewModel class in your XAML page if you prefer to set BindingContext in XAML.
76+
> **Note:** Add namespace of ViewModel class in your XAML page if you prefer to set BindingContext in XAML.
7977
8078
**[XAML]**
8179

@@ -97,26 +95,26 @@ chart.BindingContext = new ViewModel();
9795

9896
## How to populate data in .NET MAUI Pie Charts
9997

100-
As we are going to visualize the comparison of annual population of various countries in the data model, add PieSeries to SfCircularChart.Series property, and then bind the Data property of the above ViewModel to the PieSeries.ItemsSource property as shown below.
98+
As we are going to visualize the comparison of annual population of various countries in the data model, add [PieSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PieSeries.html?tabs=tabid-1) to [SfCircularChart.Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCircularChart.html#Syncfusion_Maui_Charts_SfCircularChart_Series) property, and then bind the Data property of the above ViewModel to the [PieSeries.ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html?&_ga=2.202111828.471182244.1634019879-255829655.1613129491#Syncfusion_Maui_Charts_ChartSeries_ItemsSource) property as shown below.
10199

102-
> Note: Need to set XBindingPath and YBindingPath properties, so that series would fetch values from the respective properties in the data model to plot the series.
100+
> **Note:** Need to set [XBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_XBindingPath) and [YBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.XYDataSeries.html#Syncfusion_Maui_Charts_XYDataSeries_YBindingPath) properties, so that series would fetch values from the respective properties in the data model to plot the series.
103101
104102
**[XAML]**
105103

106104
```
107-
<chart:SfCircularChart>
105+
<chart:SfCircularChart>
108106
109107
<chart:SfCircularChart.BindingContext>
110108
<viewModel:ViewModel/>
111109
</chart:SfCircularChart.BindingContext>
112110
113-
<chart:SfCircularChart.Series>
114-
<chart:PieSeries ItemsSource="{Binding Data}"
111+
<chart:SfCircularChart.Series>
112+
<chart:PieSeries ItemsSource="{Binding Data}"
115113
XBindingPath="Country"
116114
YBindingPath="Counts"
117115
ShowDataLabels="True">
118-
</chart:PieSeries>
119-
</chart:SfCircularChart.Series>
116+
</chart:PieSeries>
117+
</chart:SfCircularChart.Series>
120118
121119
</chart:SfCircularChart>
122120
```
@@ -138,3 +136,9 @@ ShowDataLabels = true
138136
series.SetBinding(ChartSeries.ItemsSourceProperty, binding);
139137
chart.Series.Add(series);
140138
```
139+
140+
## Output:
141+
142+
![.NET MAUI Pie Chart](https://user-images.githubusercontent.com/53489303/200564967-33279027-a98b-4210-9914-fa2ef07103d3.png)
143+
144+
KB article - [How to create a Pie Chart in .NET MAUI](https://www.syncfusion.com/kb/12873/how-to-create-a-pie-chart-in-net-maui)

0 commit comments

Comments
 (0)