From 7fa4426a78b331da79c642db8cd749a3b9d94151 Mon Sep 17 00:00:00 2001 From: NitheeshKumarThangaraj Date: Thu, 22 May 2025 13:24:24 +0530 Subject: [PATCH 1/8] Committed the circular and funnel chart content --- maui-toolkit/Circular-Charts/Appearance.md | 20 ++--- maui-toolkit/Circular-Charts/DataLabels.md | 58 ++++++------ maui-toolkit/Circular-Charts/DoughnutChart.md | 9 +- maui-toolkit/Circular-Charts/Explode.md | 13 ++- maui-toolkit/Circular-Charts/Exporting.md | 32 +++---- .../Circular-Charts/Getting-Started.md | 90 +++++++++---------- maui-toolkit/Circular-Charts/GroupTo.md | 8 +- maui-toolkit/Circular-Charts/Legend.md | 35 ++++---- maui-toolkit/Circular-Charts/Overview.md | 2 +- maui-toolkit/Circular-Charts/PieChart.md | 3 + .../Circular-Charts/RadialBarChart.md | 35 ++++---- maui-toolkit/Circular-Charts/Selection.md | 10 +-- maui-toolkit/Circular-Charts/Tooltip.md | 26 +++--- maui-toolkit/Funnel-Charts/Appearance.md | 21 +++-- maui-toolkit/Funnel-Charts/DataLabels.md | 30 +++---- maui-toolkit/Funnel-Charts/Exporting.md | 30 +++---- maui-toolkit/Funnel-Charts/Getting-Started.md | 39 ++++---- maui-toolkit/Funnel-Charts/Legend.md | 48 +++++----- maui-toolkit/Funnel-Charts/Overview.md | 2 +- maui-toolkit/Funnel-Charts/Segment-Spacing.md | 15 ++-- maui-toolkit/Funnel-Charts/Tooltip.md | 26 +++--- 21 files changed, 277 insertions(+), 275 deletions(-) diff --git a/maui-toolkit/Circular-Charts/Appearance.md b/maui-toolkit/Circular-Charts/Appearance.md index 3807948b..d3482c72 100644 --- a/maui-toolkit/Circular-Charts/Appearance.md +++ b/maui-toolkit/Circular-Charts/Appearance.md @@ -1,6 +1,6 @@ --- layout: post -title: Appearance in .NET MAUI Chart control Syncfusion +title: Appearance in .NET MAUI Chart control | Syncfusion description: Learn here all about appearance customization in .NET MAUI Chart (SfCircularChart), its elements and more. platform: maui-toolkit control: SfCircularChart @@ -9,18 +9,18 @@ documentation: ug # Appearance in .NET MAUI Circular Chart -The appearance of the [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) can be customized by using the predefined palettes, custom palettes, and gradient which allows enriching the application. +The appearance of the [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) can be customized using predefined palettes, custom palettes, and gradients to enrich your application. ## Custom PaletteBrushes -The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) provides support to define own brushes for series with preferred order by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) property as shown in the following code example. +The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) allows you to define your own brushes for series in your preferred order using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) property, as shown in the following code example: {% tabs %} {% highlight xaml %} - . . . + - {% endhighlight %} {% highlight c# %} @@ -65,15 +64,16 @@ public class ViewModel ## Applying Gradient -The gradient for the circular chart can be set by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) property of the series with the help of the `LinearGradientBrush` or `RadialGradientBrush`. +You can apply gradients to the circular chart by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) property of the series with either `LinearGradientBrush` or `RadialGradientBrush`. {% tabs %} {% highlight xaml %} - . . . - + @@ -151,9 +151,9 @@ public class ViewModel ![Gradient support in MAUI Chart](Appearance_images/MAUI_pie_chart_gradient.png) -## Plotting Area Customization: +## Plot Area Customization -[SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html?tabs=tabid-1) allows you to add any view to the chart plot area, which is useful for adding any relevant data, a watermark, or a color gradient to the background of the chart. +[SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) allows you to add any view to the chart plot area. This is useful for adding relevant data, watermarks, or color gradients to the background of the chart. {% tabs %} diff --git a/maui-toolkit/Circular-Charts/DataLabels.md b/maui-toolkit/Circular-Charts/DataLabels.md index c33dad20..f5b060d6 100644 --- a/maui-toolkit/Circular-Charts/DataLabels.md +++ b/maui-toolkit/Circular-Charts/DataLabels.md @@ -1,7 +1,7 @@ --- layout: post -title: Data label in .NET MAUI Chart control | .NET MAUI | Syncfusion -description: This section explains about how to configure the data labels and its features in .NET MAUI Chart (SfCircularChart). +title: Data label in .NET MAUI Chart control | Syncfusion +description: This section explains about how to configure the data labels and their features in .NET MAUI Chart (SfCircularChart). platform: maui-toolkit control: SfCircularChart documentation: ug @@ -9,28 +9,27 @@ documentation: ug # Data Labels in .NET MAUI Chart -Data labels are used to display values related to a chart segment. Values from data point(x, y) or other custom properties from a data source can be displayed. +Data labels are used to display values related to a chart segment. Values from data points (x, y) or other custom properties from a data source can be displayed. Each data label can be represented by the following: * Label - displays the segment label content at the (X, Y) point. -* Connector line - used to connect the (X, Y) point and the label element. +* Connector line - connects the (X, Y) point and the label element. ## Enable Data Labels -[ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_ShowDataLabels) property of series is used to enable the data labels. +The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_ShowDataLabels) property of series is used to enable the data labels. {% tabs %} {% highlight xaml %} - . . . + - . . . {% endhighlight %} @@ -38,11 +37,11 @@ Each data label can be represented by the following: {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations PieSeries series = new PieSeries(); // Enable data labels for this series series.ShowDataLabels = true; -. . . +// Other series configurations chart.Series.Add(series); this.Content = chart; @@ -51,7 +50,7 @@ this.Content = chart; {% endtabs %} -Data labels can be customized by using the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_DataLabelSettings) property of chart series. For customizing, need to create an instance of [CircularDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html) and set to the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_DataLabelSettings) property. Following properties are used to customize the data labels which are available in [CircularDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html). +Data labels can be customized by using the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_DataLabelSettings) property of chart series. For customizing, you need to create an instance of [CircularDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html) and set it to the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_DataLabelSettings) property. The following properties are used to customize the data labels which are available in [CircularDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html): * [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) - Gets or sets the data label position, either inside or outside of the chart segment. * [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) - Gets or sets the option to smartly arrange the data labels to avoid intersection when labels overlap. @@ -65,7 +64,7 @@ N> Data label support is applicable only for [PieSeries](https://help.syncfusion ## Data Label Position -The [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) property is used to place the data labels either [Inside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Inside) or [Outside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Outside) of the chart segment. By default the data labels are placed inside the series. +The [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) property is used to place the data labels either [Inside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Inside) or [Outside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Outside) of the chart segment. By default, the data labels are placed inside the series. {% tabs %} @@ -90,7 +89,7 @@ The [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui. {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations PieSeries series = new PieSeries(); series.ItemsSource = new SalesViewModel().Data; series.XBindingPath = "Product"; @@ -111,15 +110,15 @@ this.Content = chart; {% endtabs %} -## Smart labels +## Smart Labels -The [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) property is used to arrange the data labels smartly to avoid intersection when labels overlap. The [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html) enum contains the following values. +The [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) property is used to arrange the data labels smartly to avoid intersection when labels overlap. The [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html) enum contains the following values: * [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift) - Gets or sets the option to smartly arrange the overlapped data labels. * [Hide](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Hide) - Gets or sets the option to hide the intersected data labels. * [None](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_None) - Gets or sets the option to keep the intersected data labels visible. -By default, value for [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) property is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift). +By default, the value for the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) property is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift). If the [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) is [Inside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Inside) and the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift), then the overlapped labels will shift to outside the slices and arrange smartly. If the [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) is [Inside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Inside) and the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [Hide](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Hide), then the overlapped labels will be hidden. @@ -127,7 +126,7 @@ If the [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Ma If the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [None](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_None), then the overlapped labels will be visible irrespective of LabelPosition. -When the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift), and if the data label goes out of the chart area, then the labels got trimmed. +When the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift), and if the data label goes out of the chart area, then the labels will be trimmed. {% tabs %} @@ -136,7 +135,7 @@ When the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncf - ... + @@ -157,7 +156,7 @@ When the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncf {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations PieSeries series = new PieSeries(); series.ItemsSource = new ViewModel().Data; series.XBindingPath = "XValue"; @@ -189,14 +188,14 @@ this.Content = chart; ## Applying Series Brush -[UseSeriesPalette](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) property is used to set the interior of the series to the data label background. +The [UseSeriesPalette](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) property is used to set the interior of the series to the data label background. {% tabs %} {% highlight xaml %} - . . . + @@ -209,7 +208,7 @@ this.Content = chart; {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations PieSeries series = new PieSeries(); series.ShowDataLabels = true; @@ -232,9 +231,9 @@ this.Content = chart; ## Formatting Label Context -The content of the label can be customized using the [LabelContext](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_LabelContext) property. Following are the two options that are supported now, +The content of the label can be customized using the [LabelContext](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_LabelContext) property. The following are the two options that are supported: -* [Percentage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelContext.html#Syncfusion_Maui_Toolkit_Charts_LabelContext_Percentage) - This will show the percentage value of corresponding data point Y value. +* [Percentage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelContext.html#Syncfusion_Maui_Toolkit_Charts_LabelContext_Percentage) - This will show the percentage value of the corresponding data point Y value. * [YValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelContext.html#Syncfusion_Maui_Toolkit_Charts_LabelContext_YValue) - This will show the corresponding Y value. @@ -243,7 +242,7 @@ The content of the label can be customized using the [LabelContext](https://help {% highlight xaml %} - . . . + The circular chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html#Syncfusion_Maui_Toolkit_Charts_SfCircularChart_Series) as its default content. @@ -123,14 +123,14 @@ The view placed in the center of the doughnut chart is useful for sharing additi ### Center Hole Size -The [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterHoleSize) property of [DoughnutSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html) is used to get the diameter value of the center hole. Using the [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterHoleSize), we can protect the view in the doughnut center from overlapping with the series. +The [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterHoleSize) property of [DoughnutSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html) is used to get the diameter value of the center hole. Using the [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterHoleSize), we can prevent the view in the doughnut center from overlapping with the series. {% tabs %} {% highlight xaml %} - + @@ -180,3 +180,4 @@ this.Content = chart; {% endtabs %} ![Center View in MAUI doughnut Chart](Chart-Types_images/maui_center_View.png) + diff --git a/maui-toolkit/Circular-Charts/Explode.md b/maui-toolkit/Circular-Charts/Explode.md index 1f9d398f..fca9ab3e 100644 --- a/maui-toolkit/Circular-Charts/Explode.md +++ b/maui-toolkit/Circular-Charts/Explode.md @@ -11,7 +11,7 @@ documentation: ug ## Exploding a segment -Exploding a segment is used to pull attention to a specific area of the circular chart. The following properties are used to explode the segments in the circular chart. +Exploding a segment is used to draw attention to a specific area of the circular chart. The following properties are used to explode the segments in the circular chart: * [ExplodeIndex](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_ExplodeIndex) - Used to explode any specific segment. * [ExplodeRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_ExplodeRadius) - Used to define the explode distance. @@ -22,7 +22,7 @@ Exploding a segment is used to pull attention to a specific area of the circular {% highlight xaml %} - . . . + - . . . + The chart view can be exported as an image only when the chart view is added to the visual tree. +N> The chart view can only be exported as an image when the chart view is added to the visual tree. The following code snippet demonstrates the usage of this method: @@ -29,7 +29,6 @@ SfCircularChart chart = new SfCircularChart(); // Set the chart as the content of the current page or container this.Content = chart; -. . . // Dynamically save the chart as an image file named "ChartSample.jpeg" chart.SaveAsImage("ChartSample.jpeg"); @@ -37,17 +36,16 @@ chart.SaveAsImage("ChartSample.jpeg"); {% endtabs %} -T> We can change the image formats in above code by changing its extension as .jpg, .png. +T> You can change the image format in the code above by changing its extension to .jpg or .png. -The exported image will be saved in the different location across the platforms. +The exported image will be saved in different locations depending on the platform: -**Windows Phone, Android and MAC** – The image will be saved inside the 'Pictures' directory of the file system. +- **Windows Phone, Android, and macOS**: The image will be saved inside the 'Pictures' directory of the file system. +- **iOS**: The image will be saved inside the 'Photos/Album' directory of the file system. -**iOS** – The image will be saved inside the 'Photos/Album' directory of the file system. +To save the image on Android and Windows Phone devices, you must enable file writing permissions in the device storage. -To save the image on Android and Windows Phone devices, you must enable file writing permissions on the device storage. - -To save the image in the photo album on iOS devices, you must enable permission to access the device storage in the "Info" file. +To save the image in the photo album on iOS devices, you must enable permission to access the device storage in the Info.plist file. Add the following code snippet to the "Info" file: @@ -68,11 +66,11 @@ Add the following code snippet to the "Info" file: {% endtabs %} -## Get the stream of Chart +## Get the Stream of the Chart -The [GetStreamAsync](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_GetStreamAsync_Syncfusion_Maui_Toolkit_ImageFileFormat_) method of [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) is used to asynchronously get the chart view as a stream in the desired ImageFileFormat. The output stream can be passed as an input to other components that accept streams, such as PDF, Excel, and Word. The supported image file formats are **JPEG and PNG**. +The [GetStreamAsync](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_GetStreamAsync_Syncfusion_Maui_Toolkit_ImageFileFormat_) method of [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) is used to asynchronously get the chart view as a stream in the desired ImageFileFormat. The output stream can be passed as input to other components that accept streams, such as PDF, Excel, and Word. The supported image file formats are **JPEG and PNG**. -N> The charts stream can only be rendered when the chart view is added to the visual tree. +N> The chart stream can only be rendered when the chart view is added to the visual tree. The following code snippet demonstrates the usage of this method: @@ -95,3 +93,5 @@ await chart.GetStreamAsync(ImageFileFormat.Jpeg); {% endhighlight %} {% endtabs %} + + diff --git a/maui-toolkit/Circular-Charts/Getting-Started.md b/maui-toolkit/Circular-Charts/Getting-Started.md index e111b420..486b9eb1 100644 --- a/maui-toolkit/Circular-Charts/Getting-Started.md +++ b/maui-toolkit/Circular-Charts/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with .NET MAUI Chart control | Syncfusion -description: Learn here all about getting started with Syncfusion® .NET MAUI Chart (SfCircularChart) control, its elements, and more. +title: Getting Started with .NET MAUI Chart Control | Syncfusion +description: Learn how to get started with Syncfusion® .NET MAUI Chart (SfCircularChart) control, its elements, and more. platform: maui-toolkit control: SfCircularChart documentation: ug @@ -16,24 +16,24 @@ This section explains how to populate the Circular Chart with data, including ad ## Prerequisites -Before proceeding, ensure that the following are set up: +Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.8 or later). -## Step 1: Create a new .NET MAUI project +## Step 1: Create a New .NET MAUI Project 1. Go to **File > New > Project** and choose the **.NET MAUI App** template. -2. Name the project and choose a location. Then, click **Next.** -3. Select the .NET framework version and click **Create.** +2. Name the project and choose a location. Then, click **Next**. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI Toolkit Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/) and install the latest version. 3. Ensure the necessary dependencies are installed correctly, and the project is restored. -## Step 3: Register the handler +## Step 3: Register the Handler In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. @@ -88,8 +88,7 @@ In the **MauiProgram.cs** file, register the handler for Syncfusion® using Syncfusion.Maui.Toolkit.Charts; -. . . - +// ... public partial class MainPage : ContentPage { public MainPage() @@ -111,18 +110,18 @@ public partial class MainPage : ContentPage ## Prerequisites -Before proceeding, ensure that the following are set up: +Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 2. Set up a .NET MAUI environment with Visual Studio Code. -3. Ensure that the .NET MAUI extension is installed and configured as described [here.](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code) +3. Ensure that the .NET MAUI extension is installed and configured as described [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). -## Step 1: Create a new .NET MAUI project +## Step 1: Create a New .NET MAUI Project -1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. +1. Open the command palette by pressing `Ctrl+Shift+P`, type **.NET: New Project**, and press Enter. 2. Choose the **.NET MAUI App** template. -3. Select the project location, type the project name and press **Enter.** -4. Then choose **Create project.** +3. Select the project location, type the project name, and press **Enter**. +4. Then choose **Create project**. ## Step 2: Install the Syncfusion® MAUI Toolkit Package @@ -131,7 +130,7 @@ Before proceeding, ensure that the following are set up: 3. Run the command `dotnet add package Syncfusion.Maui.Toolkit` to install the Syncfusion® .NET MAUI Toolkit NuGet package. 4. To ensure all dependencies are installed, run `dotnet restore`. -## Step 3: Register the handler +## Step 3: Register the Handler In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. @@ -212,22 +211,22 @@ public partial class MainPage : ContentPage Before proceeding, ensure the following are set up: 1. Ensure you have the latest version of JetBrains Rider. -2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. -3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) +2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a New .NET MAUI Project -1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +1. Go to **File > New Solution**, select .NET (C#), and choose the .NET MAUI App template. 2. Enter the Project Name, Solution Name, and Location. -3. Select the .NET framework version and click Create. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI Toolkit NuGet Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/) and install the latest version. -3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, Open the Terminal in Rider and manually run: `dotnet restore` +3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, open the Terminal in Rider and manually run: `dotnet restore` -## Step 3: Register the handler +## Step 3: Register the Handler In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. @@ -282,8 +281,7 @@ In the **MauiProgram.cs** file, register the handler for Syncfusion® using Syncfusion.Maui.Toolkit.Charts; -. . . - +// ... public partial class MainPage : ContentPage { public MainPage() @@ -302,7 +300,7 @@ public partial class MainPage : ContentPage {% endtabcontent %} {% endtabcontents %} -### Initialize view model +### Initialize ViewModel Define a simple data model to represent a data point in the chart: @@ -372,8 +370,7 @@ N> If you prefer to set the `BindingContext` in XAML, make sure to add the appro using Syncfusion.Maui.Toolkit.Charts; -. . . - +// ... public partial class MainPage : ContentPage { public MainPage() @@ -390,20 +387,20 @@ public partial class MainPage : ContentPage {% endtabs %} -### Populate chart with data +### Populate Chart with Data -Adding [PieSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html) to the charts [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html#Syncfusion_Maui_Toolkit_Charts_SfCircularChart_Series) collection and binding `Data` to the series [ItemsSource](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_ItemsSource) property from its BindingContext to create our own Product Sales Pie chart. +Add [PieSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html) to the chart's [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html#Syncfusion_Maui_Toolkit_Charts_SfCircularChart_Series) collection and bind `Data` to the series [ItemsSource](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_ItemsSource) property from its BindingContext to create a Product Sales Pie chart. N> The circular chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html#Syncfusion_Maui_Toolkit_Charts_SfCircularChart_Series) as its default content. -N> To plot the series, the [XBindingPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_XBindingPath) and [YBindingPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_YBindingPath) properties must be configured so that the chart may get values from the respective properties in the data model. +N> To plot the series, the [XBindingPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_XBindingPath) and [YBindingPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_YBindingPath) properties must be configured so the chart can retrieve values from the respective properties in the data model. {% tabs %} {% highlight xaml %} - . . . + @@ -430,9 +427,9 @@ this.Content = chart; {% endtabs %} -### Add a title +### Add a Title -The title of the chart acts as the title to provide quick information to the user about the data being plotted in the chart. You can set title using the [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Title) property of circular chart as follows. +The title provides quick information to the user about the data being plotted in the chart. You can set the title using the [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Title) property of the circular chart as follows. {% tabs %} @@ -462,16 +459,16 @@ this.Content = chart; {% endtabs %} -### Enable the data labels +### Enable Data Labels -The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_ShowDataLabels) property of series can be used to enable data labels to improve the readability of the circular chart. The label visibility is set to `False` by default. +The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_ShowDataLabels) property of the series can be used to enable data labels, improving the readability of the circular chart. The label visibility is set to `False` by default. {% tabs %} {% highlight xaml %} - . . . + @@ -480,7 +477,7 @@ The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui {% highlight C# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations PieSeries series = new PieSeries(); series.ShowDataLabels = true; // Enable data labels for the series chart.Series.Add(series); @@ -489,7 +486,7 @@ this.Content = chart; {% endtabs %} -### Enable a legend +### Enable a Legend The legend provides information about the data point displayed in the circular chart. The [Legend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Legend) property of the chart was used to enable it. @@ -498,7 +495,7 @@ The legend provides information about the data point displayed in the circular c {% highlight xaml %} - . . . + @@ -509,7 +506,7 @@ The legend provides information about the data point displayed in the circular c {% highlight C# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations // Initialize and assign a new ChartLegend to the chart's Legend property chart.Legend = new ChartLegend(); this.Content = chart; @@ -519,7 +516,7 @@ this.Content = chart; ### Enable Tooltip -Tooltips are used to show information about the segment, when mouse over on it. Enable tooltip by setting series [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_EnableTooltip) property as true. +Tooltips are used to show information about the segment when the mouse hovers over it. Enable tooltips by setting the series [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_EnableTooltip) property to true. {% tabs %} @@ -626,3 +623,4 @@ public partial class MainPage : ContentPage ![Pie chart in .NET MAUI Chart](Getting-Started_Images/MAUI_pie_chart.png) You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/maui-toolkit-samples/tree/master/CircularChart/GettingStarted). + diff --git a/maui-toolkit/Circular-Charts/GroupTo.md b/maui-toolkit/Circular-Charts/GroupTo.md index 98859040..f52d0197 100644 --- a/maui-toolkit/Circular-Charts/GroupTo.md +++ b/maui-toolkit/Circular-Charts/GroupTo.md @@ -1,7 +1,7 @@ --- layout: post -title: Grouping data points in .NET MAUI Chart control | Syncfusion -description: This section explains about how to group data points in Syncfusion® .NET MAUI Chart (SfCircularChart) control. +title: Grouping Data Points in .NET MAUI Chart Control | Syncfusion +description: Learn how to group data points in Syncfusion® .NET MAUI Chart (SfCircularChart) control for better visualization. platform: maui-toolkit control: SfCircularChart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Grouping Data Points in .NET MAUI SfCircularChart -The small segments in the circular chart can be grouped into an `Others` category using the [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) and [GroupMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupMode) properties of the [PieSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html). The [GroupMode]() property is used to specify the grouping type based on slice angle, actual data point value, or percentage. The [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) property is used to set the limit to group data points into a single slice. The grouped segment is labeled as `Others` in the chart legend. +The small segments in the circular chart can be grouped into an `Others` category using the [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) and [GroupMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupMode) properties of the [PieSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html). The [GroupMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupMode) property is used to specify the grouping type based on slice angle, actual data point value, or percentage. The [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) property is used to set the limit to group data points into a single slice. The grouped segment is labeled as `Others` in the chart legend. -N> [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) only support for pie and doughnut chart. +N> [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) is only supported for pie and doughnut charts. {% tabs %} diff --git a/maui-toolkit/Circular-Charts/Legend.md b/maui-toolkit/Circular-Charts/Legend.md index 365a6fcd..45e395f8 100644 --- a/maui-toolkit/Circular-Charts/Legend.md +++ b/maui-toolkit/Circular-Charts/Legend.md @@ -1,7 +1,7 @@ --- layout: post -title: Legend in .NET MAUI Chart control | Syncfusion -description: This section explains about how to initialize legend and its customization in Syncfusion® .NET MAUI Chart (SfCircularChart) control. +title: Legend in .NET MAUI Chart Control | Syncfusion +description: Learn how to initialize and customize the legend in Syncfusion® .NET MAUI Chart (SfCircularChart) control. platform: maui-toolkit control: SfCircularChart documentation: ug @@ -11,7 +11,7 @@ keywords: .net maui circular chart, chart legend, legend-wrap, legend view, lege # Legend in .NET MAUI Chart (SfCircularChart) The [Legend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Legend) provides a list of data points, helping to identify the corresponding data points in the chart. Here's a detailed guide on how to define and customize the legend in the circular chart. -## Defining the legend +## Defining the Legend To define the legend in the chart, initialize the [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) class and assign it to the [Legend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Legend) property. {% tabs %} @@ -24,7 +24,6 @@ To define the legend in the chart, initialize the [ChartLegend](https://help.syn - {% endhighlight %} {% highlight c# %} @@ -32,13 +31,12 @@ To define the legend in the chart, initialize the [ChartLegend](https://help.syn SfCircularChart chart = new SfCircularChart(); // Create and assign a new ChartLegend to the chart's Legend property chart.Legend = new ChartLegend(); -. . . this.Content = chart; {% endhighlight %} {% endtabs %} -## Legend visibility +## Legend Visibility The visibility of the chart legend can be controlled using the [IsVisible](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_IsVisible) property. By default, the IsVisible property is set to `true`. {% tabs %} @@ -59,16 +57,15 @@ SfCircularChart chart = new SfCircularChart(); chart.Legend = new ChartLegend() { - IsVisible = true // Set the visibility of the legend to true + IsVisible = true }; -. . . this.Content = chart; {% endhighlight %} {% endtabs %} -## Legend item visibility +## Legend Item Visibility The visibility of individual legend items for specific series can be controlled using the [IsVisibleOnLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_IsVisibleOnLegend) property of the series. The default value for IsVisibleOnLegend is `true`. @@ -108,7 +105,7 @@ this.Content = chart; {% endtabs %} -## Customizing labels +## Customizing Labels The appearance of the legend label can be customized using the [`LabelStyle`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_LabelStyle) property. @@ -229,7 +226,7 @@ this.Content = chart; {% endtabs %} -## Toggle the series visibility +## Toggle the Series Visibility The visibility of circular series data points can be controlled by tapping the legend item using the [ToggleSeriesVisibility](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ToggleSeriesVisibility) property. The default value of ToggleSeriesVisibility is `false`. {% tabs %} @@ -251,7 +248,7 @@ The visibility of circular series data points can be controlled by tapping the l SfCircularChart chart = new SfCircularChart(); chart.Legend = new ChartLegend() { - ToggleSeriesVisibility = true // Enable the functionality to show/hide series by tapping on legends + ToggleSeriesVisibility = true }; this.Content = chart; @@ -259,7 +256,7 @@ this.Content = chart; {% endtabs %} -## Legend maximum size request +## Legend Maximum Size Request To set the maximum size request for the legend view, override the [GetMaximumSizeCoefficient](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_GetMaximumSizeCoefficient) protected method in [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) class. The value should be between 0 and 1, representing the maximum size request, not the desired size for the legend items layout. {% tabs %} @@ -295,12 +292,11 @@ this.Content = chart; {% endtabs %} -## Items layout +## Items Layout The [ItemsLayout](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ItemsLayout) property is used to customize the arrangement and position of each legend item. The default value is `null`. This property accepts any layout type. -For more details about the layout alignment refer to this [article](https://support.syncfusion.com/kb/article/16201/how-to-align-the-chart-legend-items-in-net-maui-circular-chart). - +For more details about the layout alignment, refer to this [article](https://support.syncfusion.com/kb/article/16201/how-to-align-the-chart-legend-items-in-net-maui-circular-chart). {% tabs %} @@ -323,7 +319,6 @@ For more details about the layout alignment refer to this [article](https://supp {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . ChartLegend legend = new ChartLegend(); legend.ItemsLayout = new FlexLayout() { @@ -338,8 +333,8 @@ this.Content = chart; {% endtabs %} -## Item template -The [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) supports customizing the appearance of legend items using the [ItemTemplate](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ItemTemplate) property. The default value of ItemsTemplate is `null`. +## Item Template +The [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) supports customizing the appearance of legend items using the [ItemTemplate](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ItemTemplate) property. The default value of ItemTemplate is `null`. N> The BindingContext of the template is the corresponding underlying legend item provided in the ChartLegendItem class. @@ -412,4 +407,4 @@ The [`LegendItemCreated`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion * When using BindableLayouts, do not bind ItemsSource explicitly. * For better UX, arrange items vertically for left and right dock positions, and horizontally for top and bottom dock positions. * If the layout's measured size is larger than the MaximumHeightRequest, scrolling will be enabled. -* If MaximumHeightRequest is set to 1 and the chart's available size is smaller than the layout's measured size, the series may not have enough space to draw properly. \ No newline at end of file +* If MaximumHeightRequest is set to 1 and the chart's available size is smaller than the layout's measured size, the series may not have enough space to draw properly. diff --git a/maui-toolkit/Circular-Charts/Overview.md b/maui-toolkit/Circular-Charts/Overview.md index 0306e053..748090b6 100644 --- a/maui-toolkit/Circular-Charts/Overview.md +++ b/maui-toolkit/Circular-Charts/Overview.md @@ -1,7 +1,7 @@ --- layout: post title: About .NET MAUI Chart Control | Syncfusion -description: Learn here all about introduction of Syncfusion® .NET MAUI Chart(SfCircularChart) control with key features and more. +description: Learn about the introduction of Syncfusion® .NET MAUI Chart (SfCircularChart) control with key features and more. platform: maui-toolkit control: SfCircularChart documentation: ug diff --git a/maui-toolkit/Circular-Charts/PieChart.md b/maui-toolkit/Circular-Charts/PieChart.md index 7b8d3e4c..44c42682 100644 --- a/maui-toolkit/Circular-Charts/PieChart.md +++ b/maui-toolkit/Circular-Charts/PieChart.md @@ -2,6 +2,8 @@ layout: post title: Pie Chart in .NET MAUI Chart control | Syncfusion description: Learn here all about the pie chart and its features in Syncfusion® .NET MAUI Chart (SfCircularChart) control. +title: Pie Chart in .NET MAUI Chart Control | Syncfusion +description: Learn about the pie chart and its features in Syncfusion® .NET MAUI Chart (SfCircularChart) control. platform: maui-toolkit control: SfCircularChart documentation: ug @@ -27,6 +29,7 @@ N> The circular chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/S {% highlight c# %} +{% highlight c# src/MainPage.xaml.cs %} SfCircularChart chart = new SfCircularChart(); // Create an instance of PieSeries diff --git a/maui-toolkit/Circular-Charts/RadialBarChart.md b/maui-toolkit/Circular-Charts/RadialBarChart.md index 01afebae..0d0b1fe7 100644 --- a/maui-toolkit/Circular-Charts/RadialBarChart.md +++ b/maui-toolkit/Circular-Charts/RadialBarChart.md @@ -1,7 +1,7 @@ --- layout: post -title: Radial Bar chart in .NET MAUI Chart control | Syncfusion -description: Learn here all about radial bar chart and its features in Syncfusion® .NET MAUI Chart Chart (SfCircularChart) control. +title: Radial Bar Chart in .NET MAUI Chart Control | Syncfusion +description: Learn about radial bar chart and its features in Syncfusion® .NET MAUI Chart (SfCircularChart) control. platform: maui-toolkit control: SfCircularChart documentation: ug @@ -21,7 +21,7 @@ The following properties can be used to customize the appearance of the radial b * [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_StrokeWidth) - To customize the width of the stroke in chart segments. - * [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_GapRatio) - To customize the spacing between each chart segments. + * [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_GapRatio) - To customize the spacing between each chart segment. * [MaximumValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_MaximumValue) - To represent the span of the segment-filled area in the radial bar track. The default value of this property is `double.NaN`. @@ -59,7 +59,7 @@ this.Content = chart; ![.NET MAUI Radial bar chart](Chart-Types_images/maui_radialbar_chart.png) -## Changing the radial bar size +## Changing the Radial Bar Size You can use the [Radius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_Radius) property to change the radial bar chart size. The default value of the radius is `0.8`. @@ -95,7 +95,7 @@ this.Content = chart; ![.NET MAUI Radial bar chart radius customization](Chart-Types_images/maui_radius.png) -## Changing the radial bar inner radius +## Changing the Radial Bar Inner Radius The [InnerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_InnerRadius) property of radial bar series is used to define the inner circle. The default value of this property is `0.4`. @@ -107,7 +107,7 @@ The [InnerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.To + InnerRadius="0.1"/> {% endhighlight %} @@ -120,7 +120,7 @@ RadialBarSeries series = new RadialBarSeries(); series.ItemsSource = (new SalesViewModel()).Data; series.XBindingPath = "Product"; series.YBindingPath = "SalesRate"; -series.InnerRadius = 0.1; // Set the inner radius of the radial bar chart, which determine the center emptiness of the chart +series.InnerRadius = 0.1; // Set the inner radius of the radial bar chart, which determines the center emptiness of the chart chart.Series.Add(series); this.Content = chart; @@ -131,11 +131,11 @@ this.Content = chart; ![.NET MAUI Radial bar chart inner radius customization](Chart-Types_images/maui_inner_radius.png) -## CapStyle customization +## CapStyle Customization The [CapStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CapStyle) property of the radial bar series is used to specify the shape of the start and end points of the circular segment. The default value of this property is `Both.Flat`. -The following types are available for [CapStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CapStyle) property. +The following types are available for [CapStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CapStyle) property: * [BothFlat](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CapStyle.html#Syncfusion_Maui_Toolkit_Charts_CapStyle_BothFlat) - Start and end positions of the segment should be updated with a flat shape. @@ -157,7 +157,7 @@ You can customize the CapStyle property of the radial bar based on its types. + CapStyle="BothCurve"/> {% endhighlight %} @@ -181,9 +181,9 @@ this.Content = chart; ![.NET MAUI Radial bar chart cap style customization](Chart-Types_images/maui_bothcurve.png) -## Segment spacing +## Segment Spacing -The [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_GapRatio) property of the radial bar series is used to define the spacing between each segments. The default value of this property is `0.2`. +The [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_GapRatio) property of the radial bar series is used to define the spacing between each segment. The default value of this property is `0.2`. {% tabs %} @@ -219,15 +219,15 @@ this.Content = chart; ![.NET MAUI Radial bar chart segment spacing customization](Chart-Types_images/maui_gapratio.png) -## Track customization +## Track Customization -You can use the following properties to customize the appearance of the circular bar track. +You can use the following properties to customize the appearance of the circular bar track: * [TrackStroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_TrackStroke) - To customize the circular bar border color. * [TrackStrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_TrackStrokeWidth) - To customize the border width of the circular bar. - * [TrackFill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_TrackFill) - To customize the circular bar area which behind the radial bar segments. + * [TrackFill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_TrackFill) - To customize the circular bar area which is behind the radial bar segments. {% tabs %} @@ -266,11 +266,11 @@ this.Content = chart; ## CenterView - Any view can be added to the center of the radial bar chart using the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterView) property of [RadialBarSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html). The view placed in the center of the radial bar chart is useful for sharing additional information about the radial bar chart.The binding context of the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterView) will be the respective radial bar series. +Any view can be added to the center of the radial bar chart using the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterView) property of [RadialBarSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html). The view placed in the center of the radial bar chart is useful for sharing additional information about the radial bar chart. The binding context of the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterView) will be the respective radial bar series. ### CenterHoleSize -The [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterHoleSize) property of RadialBarSeries is used to get the diameter value of the center hole. Using the CenterHoleSize, we can protect the view in the radial bar center from overlapping with the series +The [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterHoleSize) property of RadialBarSeries is used to get the diameter value of the center hole. Using the CenterHoleSize, we can prevent the view in the radial bar center from overlapping with the series. {% tabs %} @@ -320,3 +320,4 @@ this.Content = chart; {% endtabs %} ![.NET MAUI Radial bar chart center view customization](Chart-Types_images/maui_radialbarchart_centerview.png) + diff --git a/maui-toolkit/Circular-Charts/Selection.md b/maui-toolkit/Circular-Charts/Selection.md index fec65390..59bad46a 100644 --- a/maui-toolkit/Circular-Charts/Selection.md +++ b/maui-toolkit/Circular-Charts/Selection.md @@ -1,7 +1,7 @@ --- layout: post -title: Selection in .NET MAUI Chart control | Syncfusion -description: This section explains about how to configure the selection support and its features applying in .NET MAUI Chart (SfCircularChart). +title: Selection in .NET MAUI Chart Control | Syncfusion +description: Learn how to configure the selection support and its features in Syncfusion® .NET MAUI Chart (SfCircularChart) control. platform: maui-toolkit control: SfCircularChart documentation: ug @@ -11,7 +11,7 @@ documentation: ug The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) provides selection behavior support, which allows you to select or highlight a segment (data points) in a series using the [DataPointSelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataPointSelectionBehavior.html). -## Enable selection +## Enable Selection To enable the data point selection, create an instance of the series [SelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_SelectionBehavior) property. @@ -42,7 +42,7 @@ DataPointSelectionBehavior selection = new DataPointSelectionBehavior() }; DoughnutSeries series = new DoughnutSeries(); -. . . +// ... series.SelectionBehavior = selection; // Set the selection behavior for this series chart.Series.Add(series); this.Content = chart; @@ -51,7 +51,7 @@ this.Content = chart; {% endtabs %} -## Behavior customization +## Behavior Customization The following properties are used to customize the [ChartSelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSelectionBehavior.html): diff --git a/maui-toolkit/Circular-Charts/Tooltip.md b/maui-toolkit/Circular-Charts/Tooltip.md index f3f8b961..11075405 100644 --- a/maui-toolkit/Circular-Charts/Tooltip.md +++ b/maui-toolkit/Circular-Charts/Tooltip.md @@ -1,7 +1,7 @@ --- layout: post -title: Tooltip in .NET MAUI Chart control | Syncfusion -description: This section explains about how to enable tooltip and its customization in Syncfusion® .NET MAUI Chart (SfCircularChart) control +title: Tooltip in .NET MAUI Chart Control | Syncfusion +description: Learn how to enable tooltip and customize it in Syncfusion® .NET MAUI Chart (SfCircularChart) control. platform: maui-toolkit control: SfCircularChart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Tooltip in .NET MAUI Chart -Tooltip is used to display any information or metadata of the tapped segment. The Circular Chart provides tooltip support for all series. +Tooltip is used to display information or metadata of the tapped segment. The Circular Chart provides tooltip support for all series. ## Define Tooltip @@ -20,7 +20,7 @@ To define the tooltip in the chart, set the [EnableTooltip](https://help.syncfus {% highlight xaml %} - . . . + @@ -29,7 +29,7 @@ To define the tooltip in the chart, set the [EnableTooltip](https://help.syncfus {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations PieSeries series = new PieSeries(); series.EnableTooltip = true; // Enable tooltips for this series chart.Series.Add(series); @@ -41,7 +41,7 @@ this.Content = chart; ![Tooltip support in MAUI chart](Tooltip_images/maui_chart_tooltip.png) -The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) is used to customize the tooltip. For customizing the tooltip, create an instance [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) and set it to the [TooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_TooltipBehavior) property of [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html). The following properties are used to customize the tooltip: +The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) is used to customize the tooltip. For customizing the tooltip, create an instance of [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) and set it to the [TooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_TooltipBehavior) property of [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html). The following properties are used to customize the tooltip: * [Background](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Background) - Gets or sets the background color to the tooltip label. * [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontAttributes) - Gets or sets the font style for the label. @@ -56,7 +56,7 @@ The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusio {% highlight xml %} - . . . + @@ -67,7 +67,7 @@ The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusio {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations chart.TooltipBehavior = new ChartTooltipBehavior() { Duration = 2000, // Set the tooltip display duration @@ -86,7 +86,7 @@ Circular chart provides support to customize the appearance of the tooltip by us {% highlight xaml %} - . . . + @@ -117,7 +117,7 @@ Circular chart provides support to customize the appearance of the tooltip by us XBindingPath="Product" YBindingPath="SalesRate" TooltipTemplate="{StaticResource tooltipTemplate}"/> - . . . + {% endhighlight %} @@ -125,12 +125,11 @@ Circular chart provides support to customize the appearance of the tooltip by us {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations PieSeries series = new PieSeries(); series.EnableTooltip = true; series.TooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate; // Set a custom tooltip template from the chart's resources -. . . - +// Other series configurations this.Content = chart; {% endhighlight %} @@ -138,3 +137,4 @@ this.Content = chart; {% endtabs %} ![Tooltip template in MAUI Chart](Tooltip_images/maui_chart_tooltip_customization.png) + diff --git a/maui-toolkit/Funnel-Charts/Appearance.md b/maui-toolkit/Funnel-Charts/Appearance.md index 10b820a4..369163b2 100644 --- a/maui-toolkit/Funnel-Charts/Appearance.md +++ b/maui-toolkit/Funnel-Charts/Appearance.md @@ -1,7 +1,7 @@ --- layout: post -title: Appearance in .NET MAUI Chart control Syncfusion -description: Learn here all about appearance customization in .NET MAUI Chart (SfFunnelChart), its elements and more. +title: Appearance in .NET MAUI Chart Control | Syncfusion +description: Learn about appearance customization in Syncfusion® .NET MAUI Chart (SfFunnelChart), including palettes and gradients. platform: maui-toolkit control: SfFunnelChart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Appearance in .NET MAUI Funnel Chart -The appearance of the [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html) can be customized by using the predefined palettes, custom palettes, and gradient which allows enriching the application. +The appearance of the [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html) can be customized by using predefined palettes, custom palettes, and gradients which allow enriching the application. ## Custom PaletteBrushes @@ -23,7 +23,7 @@ The [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui. XBindingPath="XValue" YBindingPath="YValue" PaletteBrushes="{Binding CustomBrushes}"> -. . . + {% endhighlight %} @@ -38,7 +38,7 @@ public class AdmissionViewModel public AdmissionViewModel() { - //Initializing CustomBrushes collection to add custom palette colors. + // Initializing CustomBrushes collection to add custom palette colors. CustomBrushes = new List(); CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(38, 198, 218))); CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 188, 212))); @@ -46,7 +46,7 @@ public class AdmissionViewModel CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 151, 167))); CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 131, 143))); } -. . . + // Other view model code } {% endhighlight %} @@ -67,7 +67,7 @@ The gradient for the funnel chart can be set by using the [PaletteBrushes](https XBindingPath="XValue" YBindingPath="YValue" PaletteBrushes="{Binding CustomBrushes}"> -. . . + {% endhighlight %} @@ -79,9 +79,11 @@ public class AdmissionViewModel public ObservableCollection Data { get; set; } public List CustomBrushes { get; set; } + public AdmissionViewModel() { CustomBrushes = new List(); + LinearGradientBrush gradientColor1 = new LinearGradientBrush(); gradientColor1.GradientStops = new GradientStopCollection() { @@ -117,14 +119,14 @@ public class AdmissionViewModel new GradientStop() { Offset = 0, Color = Color.FromArgb("#56C596") } }; - //Adding gradient brush to the custom brushes collection. + // Adding gradient brushes to the custom brushes collection. CustomBrushes.Add(gradientColor1); CustomBrushes.Add(gradientColor2); CustomBrushes.Add(gradientColor3); CustomBrushes.Add(gradientColor4); CustomBrushes.Add(gradientColor5); } -. . . + // Other view model code } {% endhighlight %} @@ -132,3 +134,4 @@ public class AdmissionViewModel {% endtabs %} ![Gradient support in MAUI Chart](Appearance_images/MAUI_funnel_chart.png) + diff --git a/maui-toolkit/Funnel-Charts/DataLabels.md b/maui-toolkit/Funnel-Charts/DataLabels.md index c40d2c50..61e88d61 100644 --- a/maui-toolkit/Funnel-Charts/DataLabels.md +++ b/maui-toolkit/Funnel-Charts/DataLabels.md @@ -1,7 +1,7 @@ --- layout: post -title: Data label in .NET MAUI Chart control | .NET MAUI | Syncfusion -description: This section explains about how to configure the data labels and its features in .NET MAUI Chart (SfFunnelChart). +title: Data Labels in .NET MAUI Chart Control | Syncfusion +description: Learn how to configure data labels and their features in Syncfusion® .NET MAUI Chart (SfFunnelChart) control. platform: maui-toolkit control: SfFunnelChart documentation: ug @@ -9,18 +9,18 @@ documentation: ug # Data Labels in .NET MAUI Chart -Data labels are used to display values related to a chart segment. Values from data point(x, y) or other custom properties from a data source can be displayed. +Data labels are used to display values related to a chart segment. Values from data point (x, y) or other custom properties from a data source can be displayed. ## Enable Data Labels -To define the data label in the chart, set the [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_ShowDataLabels) property to true. The default value of [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_ShowDataLabels) property is false. +To define data labels in the chart, set the [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_ShowDataLabels) property to true. The default value of the [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_ShowDataLabels) property is false. {% tabs %} {% highlight xaml %} - -. . . + + {% endhighlight %} @@ -28,21 +28,21 @@ To define the data label in the chart, set the [ShowDataLabels](https://help.syn {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); -. . . +// Other chart configurations chart.ShowDataLabels = true; // Enable data labels for the chart. this.Content = chart; {% endhighlight %} {% endtabs %} -## Data label customization +## Data Label Customization - Data labels can be customized by using the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_DataLabelSettings) property of the chart. For customizing, need to create an instance of [FunnelDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FunnelDataLabelSettings.html) and set to the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_DataLabelSettings) property.The following properties, which are available in [FunnelDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FunnelDataLabelSettings.html), are used to customize the data labels. +Data labels can be customized by using the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_DataLabelSettings) property of the chart. For customization, you need to create an instance of [FunnelDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FunnelDataLabelSettings.html) and set it to the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_DataLabelSettings) property. The following properties, which are available in [FunnelDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FunnelDataLabelSettings.html), are used to customize the data labels: - * [`LabelPlacement`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelPlacement) - It used to position the funnel chart data labels at [Auto](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Auto), [Inner](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Inner), [Center](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Center) and [Outer](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Outer). - * [`UseSeriesPalette`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) - It used to set the interior of the chart to the data label background. - * [`Context`]() of type `FunnelDataLabelContext`, indicates weather to show x or y value in the label content. - * [`LabelStyle`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelStyle) - It used to customize the data label's appearance. The following properties, which are available in [LabelStyle](). +* [LabelPlacement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelPlacement) - Used to position the funnel chart data labels at [Auto](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Auto), [Inner](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Inner), [Center](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Center) and [Outer](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Outer). +* [UseSeriesPalette](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) - Used to set the interior of the chart to the data label background. +* [Context](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FunnelDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_FunnelDataLabelSettings_Context) of type `FunnelDataLabelContext`, indicates whether to show x or y value in the label content. +* [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelStyle) - Used to customize the data label's appearance. The following properties are available in [ChartDataLabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelStyle.html): * [Margin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_Margin) of type `Thickness`, indicates the label's margin. * [Background](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_Background), of type `Brush`, indicates the label background color. * [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_FontAttributes), of type `FontAttributes`, indicates the font style of the data label. @@ -57,7 +57,7 @@ this.Content = chart; {% highlight xaml %} - . . . + The chart view can be exported as an image only when the chart view is added to the visual tree. @@ -22,7 +22,7 @@ The following code snippet demonstrates the usage of this method: {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); -... +// Other chart configurations this.Content = chart; chart.SaveAsImage("ChartSample.jpeg"); // Export the chart view as an image in the JPEG format. @@ -30,19 +30,19 @@ chart.SaveAsImage("ChartSample.jpeg"); // Export the chart view as an image in t {% endtabs %} -T> We can change the image formats in above code by changing its extension as .jpg, .png. +T> You can change the image format in the code above by changing its extension to .jpg or .png. -The exported image will be saved in the different location across the platforms. +The exported image will be saved in different locations depending on the platform: -**Windows Phone, Android and MAC** – The image will be saved inside the 'Pictures' directory of the file system. +**Windows Phone, Android, and macOS** – The image will be saved inside the 'Pictures' directory of the file system. **iOS** – The image will be saved inside the 'Photos/Album' directory of the file system. -To save the image on Android and Windows Phone devices, you must enable file writing permissions on the device storage. +To save the image on Android and Windows Phone devices, you must enable file writing permissions in the device storage. -To save the image in the photo album on iOS devices, you must enable permission to access the device storage in the "Info" file. +To save the image in the photo album on iOS devices, you must enable permission to access the device storage in the Info.plist file. -Add the following code snippet to the "Info" file: +Add the following code snippet to the Info.plist file: {% tabs %} @@ -61,11 +61,11 @@ Add the following code snippet to the "Info" file: {% endtabs %} -## Get the stream of Chart +## Get the Stream of the Chart -The [GetStreamAsync](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_GetStreamAsync_Syncfusion_Maui_Toolkit_ImageFileFormat_) method of [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html) is used to asynchronously get the chart view as a stream in the desired ImageFileFormat. The output stream can be passed as an input to other components that accept streams, such as PDF, Excel, and Word. The supported image file formats are **JPEG and PNG**. +The [GetStreamAsync](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_GetStreamAsync_Syncfusion_Maui_Toolkit_ImageFileFormat_) method of [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html) is used to asynchronously get the chart view as a stream in the desired ImageFileFormat. The output stream can be passed as input to other components that accept streams, such as PDF, Excel, and Word. The supported image file formats are **JPEG and PNG**. -N> The charts stream can only be rendered when the chart view is added to the visual tree. +N> The chart stream can only be rendered when the chart view is added to the visual tree. The following code snippet demonstrates the usage of this method: @@ -74,7 +74,7 @@ The following code snippet demonstrates the usage of this method: {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); -... +// Other chart configurations this.Content = chart; await chart.GetStreamAsync(ImageFileFormat.Jpeg); // Get the chart view as a stream in the JPEG format. diff --git a/maui-toolkit/Funnel-Charts/Getting-Started.md b/maui-toolkit/Funnel-Charts/Getting-Started.md index 8d3011d0..f63664c5 100644 --- a/maui-toolkit/Funnel-Charts/Getting-Started.md +++ b/maui-toolkit/Funnel-Charts/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with .NET MAUI Chart control | Syncfusion -description: Learn here all about getting started with Syncfusion® .NET MAUI Chart (SfFunnelChart) control, its elements, and more. +title: Getting Started with .NET MAUI Chart Control | Syncfusion +description: Learn how to get started with Syncfusion® .NET MAUI Chart (SfFunnelChart) control, its elements, and more. platform: maui-toolkit control: SfFunnelChart documentation: ug @@ -16,24 +16,24 @@ This section explains how to populate the Funnel Chart with data, including addi ## Prerequisites -Before proceeding, ensure that the following are set up: +Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.8 or later). -## Step 1: Create a new .NET MAUI project +## Step 1: Create a New .NET MAUI Project 1. Go to **File > New > Project** and choose the **.NET MAUI App** template. -2. Name the project and choose a location. Then, click **Next.** -3. Select the .NET framework version and click **Create.** +2. Name the project and choose a location. Then, click **Next**. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI Toolkit Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/) and install the latest version. 3. Ensure the necessary dependencies are installed correctly, and the project is restored. -## Step 3: Register the handler +## Step 3: Register the Handler In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. @@ -101,7 +101,7 @@ public partial class MainPage : ContentPage } {% endhighlight %} -{% endtabs %} +{% endtabs %} {% endtabcontent %} @@ -109,18 +109,18 @@ public partial class MainPage : ContentPage ## Prerequisites -Before proceeding, ensure that the following are set up: +Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 2. Set up a .NET MAUI environment with Visual Studio Code. -3. Ensure that the .NET MAUI extension is installed and configured as described [here.](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code) +3. Ensure that the .NET MAUI extension is installed and configured as described [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). -## Step 1: Create a new .NET MAUI project +## Step 1: Create a New .NET MAUI Project -1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. +1. Open the command palette by pressing `Ctrl+Shift+P`, type **.NET: New Project**, and press Enter. 2. Choose the **.NET MAUI App** template. -3. Select the project location, type the project name and press **Enter.** -4. Then choose **Create project.** +3. Select the project location, type the project name, and press **Enter**. +4. Then choose **Create project**. ## Step 2: Install the Syncfusion® MAUI Toolkit Package @@ -129,7 +129,7 @@ Before proceeding, ensure that the following are set up: 3. Run the command `dotnet add package Syncfusion.Maui.Toolkit` to install the Syncfusion® .NET MAUI Toolkit NuGet package. 4. To ensure all dependencies are installed, run `dotnet restore`. -## Step 3: Register the handler +## Step 3: Register the Handler In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. @@ -594,9 +594,8 @@ public partial class MainPage : ContentPage } {% endhighlight %} - {% endtabs %} ![Funnel chart in .NET MAUI Chart](Getting-Started_Images/MAUI_funnel_chart.png) -You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/maui-toolkit-samples/tree/master/FunnelChart/GettingStarted). \ No newline at end of file +You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/maui-toolkit-samples/tree/master/FunnelChart/GettingStarted). diff --git a/maui-toolkit/Funnel-Charts/Legend.md b/maui-toolkit/Funnel-Charts/Legend.md index 9cbecdaf..8870e77c 100644 --- a/maui-toolkit/Funnel-Charts/Legend.md +++ b/maui-toolkit/Funnel-Charts/Legend.md @@ -1,7 +1,7 @@ --- layout: post -title: Legend in .NET MAUI Chart control | Syncfusion -description: This section explains about how to initialize legend and its customization in Syncfusion® .NET MAUI Chart (SfFunnelChart) control. +title: Legend in .NET MAUI Chart Control | Syncfusion +description: Learn how to initialize and customize the legend in Syncfusion® .NET MAUI Chart (SfFunnelChart) control. platform: maui-toolkit control: SfFunnelChart documentation: ug @@ -12,7 +12,7 @@ keywords: .net maui funnel chart, funnel-chart, chart legend, legend-wrap, legen The [Legend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Legend) provides a list of data points, helping to identify the corresponding data points in the chart. Here's a detailed guide on how to define and customize the legend in the funnel chart. -## Defining the legend +## Defining the Legend To define the legend in the chart, initialize the [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) class and assign it to the [Legend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Legend) property. @@ -46,7 +46,8 @@ this.Content = chart; {% endtabs %} -## Legend visibility +## Legend Visibility + The visibility of the chart legend can be controlled using the [IsVisible](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_IsVisible) property. By default, the IsVisible property is set to `true`. {% tabs %} @@ -82,15 +83,15 @@ this.Content = chart; {% endtabs %} -## Customizing labels +## Customizing Labels The appearance of the legend label can be customized using the [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_LabelStyle) property. -* [`TextColor`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_TextColor) – Gets or sets the color of the label. -* [`FontFamily`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontFamily) - Gets or sets the font family for the legend label. -* [`FontAttributes`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontAttributes) - Gets or sets the font style for the legend label. -* [`FontSize`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontSize) - Gets or sets the font size for the legend label. -* [`Margin`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_Margin) - Gets or sets the margin size of labels. +* [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_TextColor) – Gets or sets the color of the label. +* [FontFamily](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontFamily) - Gets or sets the font family for the legend label. +* [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontAttributes) - Gets or sets the font style for the legend label. +* [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontSize) - Gets or sets the font size for the legend label. +* [Margin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_Margin) - Gets or sets the margin size of labels. {% tabs %} @@ -141,8 +142,8 @@ this.Content = chart; ![Legend labels customization support in Maui Chart](Legend-images/legend_label_style.png) -## Legend icon -To specify the legend icon based on associate series type using the [LegendIcon](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_LegendIcon) and change its type using [ChartLegendIconType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendIconType.html) enum values. +## Legend Icon +To specify the legend icon based on the associated series type, use the [LegendIcon](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_LegendIcon) property and change its type using the [ChartLegendIconType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendIconType.html) enum values. {% tabs %} @@ -177,6 +178,7 @@ this.Content = chart; {% endtabs %} ## Placement + The legend can be positioned to the left, right, top, or bottom of the chart area using the [Placement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_Placement) property in the ChartLegend class. The default placement is `Top`. {% tabs %} @@ -213,7 +215,8 @@ this.Content = chart; {% endtabs %} -## Toggle the series visibility +## Toggle the Series Visibility + The visibility of segments in the funnel chart can be controlled by tapping the legend item using the [ToggleSeriesVisibility](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ToggleSeriesVisibility) property. The default value of ToggleSeriesVisibility is `false`. {% tabs %} @@ -223,11 +226,11 @@ The visibility of segments in the funnel chart can be controlled by tapping the - . . . + - . . . + {% endhighlight %} @@ -248,20 +251,20 @@ funnelChart.Legend = new ChartLegend() ToggleSeriesVisibility = true // Enable the toggle visibility of the series using legend. }; -this.Content = chart; +this.Content = funnelChart; {% endhighlight %} {% endtabs %} -## Legend maximum size request -To set the maximum size request for the legend view, override the [GetMaximumSizeCoefficient](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_GetMaximumSizeCoefficient) protected method in [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) class. The value should be between 0 and 1, representing the maximum size request, not the desired size for the legend items layout. +## Legend Maximum Size Request +To set the maximum size request for the legend view, override the [GetMaximumSizeCoefficient](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_GetMaximumSizeCoefficient) protected method in the [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) class. The value should be between 0 and 1, representing the maximum size request, not the desired size for the legend items layout. {% tabs %} {% highlight xaml %} - . . . + @@ -377,7 +380,7 @@ SfFunnelChart chart = new SfFunnelChart() YBindingPath = "YValue", ItemsSource = new AdmissionViewModel().Data, }; - +// Other chart configurations ChartLegend legend = new ChartLegend(); // Initialize the legend. legend.ItemTemplate = chart.Resources["legendTemplate"] as DataTemplate; // Set the item template for the legend. ... @@ -394,7 +397,7 @@ this.Content = chart; **LegendItemCreated** -The [`LegendItemCreated`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_LegendItemCreated) event is triggered when the chart legend item is created. The argument contains the [`LegendItem`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.LegendItemEventArgs.html#Syncfusion_Maui_Toolkit_LegendItemEventArgs_LegendItem) object. The following properties are present in [`LegendItem`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.LegendItemEventArgs.html#Syncfusion_Maui_Toolkit_LegendItemEventArgs_LegendItem). +The [LegendItemCreated](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_LegendItemCreated) event is triggered when the chart legend item is created. The argument contains the [LegendItem](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.LegendItemEventArgs.html#Syncfusion_Maui_Toolkit_LegendItemEventArgs_LegendItem) object. The following properties are present in [LegendItem](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.LegendItemEventArgs.html#Syncfusion_Maui_Toolkit_LegendItemEventArgs_LegendItem): * [`Text`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_Text) – used to get or set the text of the label. * [`TextColor`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_TextColor) – used to get or set the color of the label. @@ -410,9 +413,10 @@ The [`LegendItemCreated`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion * [`DisableBrush`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_DisableBrush) - used to get or set the color of the legend when toggled. * [`Index`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_Index) - used to get index position of the legend. * [`Item`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_Item) - used to get the corresponding data points for the legend item. + ## Limitations * Do not add items explicitly. * When using BindableLayouts, do not bind ItemsSource explicitly. * For better UX, arrange items vertically for left and right dock positions, and horizontally for top and bottom dock positions. * If the layout's measured size is larger than the MaximumHeightRequest, scrolling will be enabled. -* If MaximumHeightRequest is set to 1 and the chart's available size is smaller than the layout's measured size, the series may not have enough space to draw properly. \ No newline at end of file +* If MaximumHeightRequest is set to 1 and the chart's available size is smaller than the layout's measured size, the series may not have enough space to draw properly. diff --git a/maui-toolkit/Funnel-Charts/Overview.md b/maui-toolkit/Funnel-Charts/Overview.md index b1d5c525..7f81ba67 100644 --- a/maui-toolkit/Funnel-Charts/Overview.md +++ b/maui-toolkit/Funnel-Charts/Overview.md @@ -1,7 +1,7 @@ --- layout: post title: About .NET MAUI Chart Control | Syncfusion -description: Learn here all about introduction of Syncfusion® .NET MAUI Chart(SfFunnelChart) control with key features and more +description: Learn about the Syncfusion® .NET MAUI Chart (SfFunnelChart) control with key features and more. platform: maui-toolkit control: SfFunnelChart documentation: ug diff --git a/maui-toolkit/Funnel-Charts/Segment-Spacing.md b/maui-toolkit/Funnel-Charts/Segment-Spacing.md index a71f19ac..989a915f 100644 --- a/maui-toolkit/Funnel-Charts/Segment-Spacing.md +++ b/maui-toolkit/Funnel-Charts/Segment-Spacing.md @@ -1,22 +1,22 @@ --- layout: post -title: Segment spacing in .NET MAUI Chart control Syncfusion -description: Learn here all about segment spacing customization in .NET MAUI Chart (SfFunnelChart), its elements and more. +title: Segment Spacing in .NET MAUI Chart Control | Syncfusion +description: Learn about segment spacing customization in Syncfusion® .NET MAUI Chart (SfFunnelChart) control and its implementation. platform: maui-toolkit control: SfFunnelChart documentation: ug --- -# Segment spacing in .NET MAUI Funnel Chart +# Segment Spacing in .NET MAUI Funnel Chart -The gap between each segment in the funnel chart can be set using the [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_GapRatio) property is `0` and its value ranges from `0 to 1`. +The gap between each segment in the funnel chart can be set using the [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_GapRatio) property. The default value of GapRatio is `0`, and its value ranges from `0 to 1`. {% tabs %} {% highlight xml %} - . . . + {% endhighlight %} @@ -24,12 +24,13 @@ The gap between each segment in the funnel chart can be set using the [GapRatio] {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); -. . . +// Other chart configurations chart.GapRatio = 0.2; // Set gap ratio between funnel segments. -. . . +// Other chart configurations this.Content = chart; {% endhighlight %} {% endtabs %} ![Segment spacing in MAUI Chart](Segment_Spacing_images/MAUI_spacing_chart.png) + diff --git a/maui-toolkit/Funnel-Charts/Tooltip.md b/maui-toolkit/Funnel-Charts/Tooltip.md index f8b6f76a..db420556 100644 --- a/maui-toolkit/Funnel-Charts/Tooltip.md +++ b/maui-toolkit/Funnel-Charts/Tooltip.md @@ -1,7 +1,7 @@ --- layout: post -title: Tooltip in .NET MAUI Chart control | Syncfusion -description: This section explains about how to enable tooltip and its customization in Syncfusion® .NET MAUI Chart (SfFunnelChart) control +title: Tooltip in .NET MAUI Chart Control | Syncfusion +description: Learn how to enable tooltips and customize them in Syncfusion® .NET MAUI Chart (SfFunnelChart) control. platform: maui-toolkit control: SfFunnelChart documentation: ug @@ -20,16 +20,15 @@ To define the tooltip in the chart, set the [EnableTooltip](https://help.syncfus {% highlight xaml %} - . . . + - {% endhighlight %} {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); -. . . +// Other chart configurations chart.EnableTooltip = true; // Enable tooltip for the chart. this.Content = chart; {% endhighlight %} @@ -38,7 +37,7 @@ this.Content = chart; ![Tooltip support in MAUI chart](Tooltip_images/MAUI_chart_tooltip.png) -The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) is used to customize the tooltip. For customizing the tooltip, create an instance [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) and set it to the [TooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_TooltipBehavior) property of [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html). The following properties are used to customize the tooltip: +The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) is used to customize the tooltip. For customizing the tooltip, create an instance of [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) and set it to the [TooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_TooltipBehavior) property of [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html). The following properties are used to customize the tooltip: * [Background](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Background) of type `Brush`, indicates background color to the tooltip label. * [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontAttributes) of type `FontAttributes`, indicates the font style of the label. @@ -53,7 +52,7 @@ The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusio {% highlight xml %} - . . . + @@ -64,7 +63,7 @@ The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusio {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); -. . . +// Other chart configurations chart.EnableTooltip = true; // Enable tooltip for the chart. // Customize the tooltip behavior. @@ -72,7 +71,7 @@ chart.TooltipBehavior = new ChartTooltipBehavior() { Duration = 4, // Set the duration for displaying the tooltip. }; -. . . +// Other chart configurations this.Content = chart; {% endhighlight %} @@ -106,7 +105,7 @@ this.Content = chart; - . . . + @@ -115,13 +114,14 @@ this.Content = chart; {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); -. . . +// Other chart configurations chart.EnableTooltip = true; // Enable tooltip for the chart. -chart.TooltipTemplate= grid.Resources["tooltipTemplate"] as DataTemplate; // Set the tooltip template. -. . . +chart.TooltipTemplate = grid.Resources["tooltipTemplate"] as DataTemplate; // Set the tooltip template. +// Other chart configurations this.Content = chart; {% endhighlight %} {% endtabs %} ![Tooltip template in MAUI Chart](Tooltip_images/MAUI_chart_tooltip_customization.png) + From 5bd2c7ff27fc78ad460bcabe942517d7021ffe3f Mon Sep 17 00:00:00 2001 From: NitheeshKumarThangaraj Date: Tue, 3 Jun 2025 13:16:40 +0530 Subject: [PATCH 2/8] reverted the changes --- maui-toolkit/Circular-Charts/Appearance.md | 20 ++--- maui-toolkit/Circular-Charts/DataLabels.md | 58 ++++++------ maui-toolkit/Circular-Charts/DoughnutChart.md | 9 +- maui-toolkit/Circular-Charts/Explode.md | 13 +-- maui-toolkit/Circular-Charts/Exporting.md | 32 +++---- .../Circular-Charts/Getting-Started.md | 90 ++++++++++--------- maui-toolkit/Circular-Charts/GroupTo.md | 8 +- maui-toolkit/Circular-Charts/Legend.md | 35 ++++---- maui-toolkit/Circular-Charts/Overview.md | 2 +- maui-toolkit/Circular-Charts/PieChart.md | 3 - .../Circular-Charts/RadialBarChart.md | 35 ++++---- maui-toolkit/Circular-Charts/Selection.md | 10 +-- maui-toolkit/Circular-Charts/Tooltip.md | 26 +++--- maui-toolkit/Funnel-Charts/Appearance.md | 21 ++--- maui-toolkit/Funnel-Charts/DataLabels.md | 30 +++---- maui-toolkit/Funnel-Charts/Exporting.md | 30 +++---- maui-toolkit/Funnel-Charts/Getting-Started.md | 39 ++++---- maui-toolkit/Funnel-Charts/Legend.md | 48 +++++----- maui-toolkit/Funnel-Charts/Overview.md | 2 +- maui-toolkit/Funnel-Charts/Segment-Spacing.md | 15 ++-- maui-toolkit/Funnel-Charts/Tooltip.md | 26 +++--- 21 files changed, 275 insertions(+), 277 deletions(-) diff --git a/maui-toolkit/Circular-Charts/Appearance.md b/maui-toolkit/Circular-Charts/Appearance.md index d3482c72..3807948b 100644 --- a/maui-toolkit/Circular-Charts/Appearance.md +++ b/maui-toolkit/Circular-Charts/Appearance.md @@ -1,6 +1,6 @@ --- layout: post -title: Appearance in .NET MAUI Chart control | Syncfusion +title: Appearance in .NET MAUI Chart control Syncfusion description: Learn here all about appearance customization in .NET MAUI Chart (SfCircularChart), its elements and more. platform: maui-toolkit control: SfCircularChart @@ -9,18 +9,18 @@ documentation: ug # Appearance in .NET MAUI Circular Chart -The appearance of the [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) can be customized using predefined palettes, custom palettes, and gradients to enrich your application. +The appearance of the [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) can be customized by using the predefined palettes, custom palettes, and gradient which allows enriching the application. ## Custom PaletteBrushes -The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) allows you to define your own brushes for series in your preferred order using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) property, as shown in the following code example: +The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) provides support to define own brushes for series with preferred order by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) property as shown in the following code example. {% tabs %} {% highlight xaml %} - + . . . + {% endhighlight %} {% highlight c# %} @@ -64,16 +65,15 @@ public class ViewModel ## Applying Gradient -You can apply gradients to the circular chart by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) property of the series with either `LinearGradientBrush` or `RadialGradientBrush`. +The gradient for the circular chart can be set by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) property of the series with the help of the `LinearGradientBrush` or `RadialGradientBrush`. {% tabs %} {% highlight xaml %} - - @@ -151,9 +151,9 @@ public class ViewModel ![Gradient support in MAUI Chart](Appearance_images/MAUI_pie_chart_gradient.png) -## Plot Area Customization +## Plotting Area Customization: -[SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) allows you to add any view to the chart plot area. This is useful for adding relevant data, watermarks, or color gradients to the background of the chart. +[SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html?tabs=tabid-1) allows you to add any view to the chart plot area, which is useful for adding any relevant data, a watermark, or a color gradient to the background of the chart. {% tabs %} diff --git a/maui-toolkit/Circular-Charts/DataLabels.md b/maui-toolkit/Circular-Charts/DataLabels.md index f5b060d6..c33dad20 100644 --- a/maui-toolkit/Circular-Charts/DataLabels.md +++ b/maui-toolkit/Circular-Charts/DataLabels.md @@ -1,7 +1,7 @@ --- layout: post -title: Data label in .NET MAUI Chart control | Syncfusion -description: This section explains about how to configure the data labels and their features in .NET MAUI Chart (SfCircularChart). +title: Data label in .NET MAUI Chart control | .NET MAUI | Syncfusion +description: This section explains about how to configure the data labels and its features in .NET MAUI Chart (SfCircularChart). platform: maui-toolkit control: SfCircularChart documentation: ug @@ -9,27 +9,28 @@ documentation: ug # Data Labels in .NET MAUI Chart -Data labels are used to display values related to a chart segment. Values from data points (x, y) or other custom properties from a data source can be displayed. +Data labels are used to display values related to a chart segment. Values from data point(x, y) or other custom properties from a data source can be displayed. Each data label can be represented by the following: * Label - displays the segment label content at the (X, Y) point. -* Connector line - connects the (X, Y) point and the label element. +* Connector line - used to connect the (X, Y) point and the label element. ## Enable Data Labels -The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_ShowDataLabels) property of series is used to enable the data labels. +[ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_ShowDataLabels) property of series is used to enable the data labels. {% tabs %} {% highlight xaml %} - + . . . + . . . {% endhighlight %} @@ -37,11 +38,11 @@ The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -// Other chart configurations +. . . PieSeries series = new PieSeries(); // Enable data labels for this series series.ShowDataLabels = true; -// Other series configurations +. . . chart.Series.Add(series); this.Content = chart; @@ -50,7 +51,7 @@ this.Content = chart; {% endtabs %} -Data labels can be customized by using the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_DataLabelSettings) property of chart series. For customizing, you need to create an instance of [CircularDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html) and set it to the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_DataLabelSettings) property. The following properties are used to customize the data labels which are available in [CircularDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html): +Data labels can be customized by using the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_DataLabelSettings) property of chart series. For customizing, need to create an instance of [CircularDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html) and set to the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_DataLabelSettings) property. Following properties are used to customize the data labels which are available in [CircularDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html). * [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) - Gets or sets the data label position, either inside or outside of the chart segment. * [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) - Gets or sets the option to smartly arrange the data labels to avoid intersection when labels overlap. @@ -64,7 +65,7 @@ N> Data label support is applicable only for [PieSeries](https://help.syncfusion ## Data Label Position -The [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) property is used to place the data labels either [Inside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Inside) or [Outside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Outside) of the chart segment. By default, the data labels are placed inside the series. +The [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) property is used to place the data labels either [Inside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Inside) or [Outside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Outside) of the chart segment. By default the data labels are placed inside the series. {% tabs %} @@ -89,7 +90,7 @@ The [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui. {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -// Other chart configurations +. . . PieSeries series = new PieSeries(); series.ItemsSource = new SalesViewModel().Data; series.XBindingPath = "Product"; @@ -110,15 +111,15 @@ this.Content = chart; {% endtabs %} -## Smart Labels +## Smart labels -The [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) property is used to arrange the data labels smartly to avoid intersection when labels overlap. The [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html) enum contains the following values: +The [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) property is used to arrange the data labels smartly to avoid intersection when labels overlap. The [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html) enum contains the following values. * [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift) - Gets or sets the option to smartly arrange the overlapped data labels. * [Hide](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Hide) - Gets or sets the option to hide the intersected data labels. * [None](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_None) - Gets or sets the option to keep the intersected data labels visible. -By default, the value for the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) property is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift). +By default, value for [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) property is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift). If the [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) is [Inside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Inside) and the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift), then the overlapped labels will shift to outside the slices and arrange smartly. If the [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) is [Inside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Inside) and the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [Hide](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Hide), then the overlapped labels will be hidden. @@ -126,7 +127,7 @@ If the [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Ma If the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [None](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_None), then the overlapped labels will be visible irrespective of LabelPosition. -When the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift), and if the data label goes out of the chart area, then the labels will be trimmed. +When the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift), and if the data label goes out of the chart area, then the labels got trimmed. {% tabs %} @@ -135,7 +136,7 @@ When the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncf - + ... @@ -156,7 +157,7 @@ When the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncf {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -// Other chart configurations +. . . PieSeries series = new PieSeries(); series.ItemsSource = new ViewModel().Data; series.XBindingPath = "XValue"; @@ -188,14 +189,14 @@ this.Content = chart; ## Applying Series Brush -The [UseSeriesPalette](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) property is used to set the interior of the series to the data label background. +[UseSeriesPalette](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) property is used to set the interior of the series to the data label background. {% tabs %} {% highlight xaml %} - + . . . @@ -208,7 +209,7 @@ The [UseSeriesPalette](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Ma {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -// Other chart configurations +. . . PieSeries series = new PieSeries(); series.ShowDataLabels = true; @@ -231,9 +232,9 @@ this.Content = chart; ## Formatting Label Context -The content of the label can be customized using the [LabelContext](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_LabelContext) property. The following are the two options that are supported: +The content of the label can be customized using the [LabelContext](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_LabelContext) property. Following are the two options that are supported now, -* [Percentage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelContext.html#Syncfusion_Maui_Toolkit_Charts_LabelContext_Percentage) - This will show the percentage value of the corresponding data point Y value. +* [Percentage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelContext.html#Syncfusion_Maui_Toolkit_Charts_LabelContext_Percentage) - This will show the percentage value of corresponding data point Y value. * [YValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelContext.html#Syncfusion_Maui_Toolkit_Charts_LabelContext_YValue) - This will show the corresponding Y value. @@ -242,7 +243,7 @@ The content of the label can be customized using the [LabelContext](https://help {% highlight xaml %} - + . . . The circular chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html#Syncfusion_Maui_Toolkit_Charts_SfCircularChart_Series) as its default content. @@ -123,14 +123,14 @@ The view placed in the center of the doughnut chart is useful for sharing additi ### Center Hole Size -The [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterHoleSize) property of [DoughnutSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html) is used to get the diameter value of the center hole. Using the [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterHoleSize), we can prevent the view in the doughnut center from overlapping with the series. +The [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterHoleSize) property of [DoughnutSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html) is used to get the diameter value of the center hole. Using the [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterHoleSize), we can protect the view in the doughnut center from overlapping with the series. {% tabs %} {% highlight xaml %} - + @@ -180,4 +180,3 @@ this.Content = chart; {% endtabs %} ![Center View in MAUI doughnut Chart](Chart-Types_images/maui_center_View.png) - diff --git a/maui-toolkit/Circular-Charts/Explode.md b/maui-toolkit/Circular-Charts/Explode.md index fca9ab3e..1f9d398f 100644 --- a/maui-toolkit/Circular-Charts/Explode.md +++ b/maui-toolkit/Circular-Charts/Explode.md @@ -11,7 +11,7 @@ documentation: ug ## Exploding a segment -Exploding a segment is used to draw attention to a specific area of the circular chart. The following properties are used to explode the segments in the circular chart: +Exploding a segment is used to pull attention to a specific area of the circular chart. The following properties are used to explode the segments in the circular chart. * [ExplodeIndex](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_ExplodeIndex) - Used to explode any specific segment. * [ExplodeRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_ExplodeRadius) - Used to define the explode distance. @@ -22,7 +22,7 @@ Exploding a segment is used to draw attention to a specific area of the circular {% highlight xaml %} - + . . . - + . . . The chart view can only be exported as an image when the chart view is added to the visual tree. +N> The chart view can be exported as an image only when the chart view is added to the visual tree. The following code snippet demonstrates the usage of this method: @@ -29,6 +29,7 @@ SfCircularChart chart = new SfCircularChart(); // Set the chart as the content of the current page or container this.Content = chart; +. . . // Dynamically save the chart as an image file named "ChartSample.jpeg" chart.SaveAsImage("ChartSample.jpeg"); @@ -36,16 +37,17 @@ chart.SaveAsImage("ChartSample.jpeg"); {% endtabs %} -T> You can change the image format in the code above by changing its extension to .jpg or .png. +T> We can change the image formats in above code by changing its extension as .jpg, .png. -The exported image will be saved in different locations depending on the platform: +The exported image will be saved in the different location across the platforms. -- **Windows Phone, Android, and macOS**: The image will be saved inside the 'Pictures' directory of the file system. -- **iOS**: The image will be saved inside the 'Photos/Album' directory of the file system. +**Windows Phone, Android and MAC** – The image will be saved inside the 'Pictures' directory of the file system. -To save the image on Android and Windows Phone devices, you must enable file writing permissions in the device storage. +**iOS** – The image will be saved inside the 'Photos/Album' directory of the file system. -To save the image in the photo album on iOS devices, you must enable permission to access the device storage in the Info.plist file. +To save the image on Android and Windows Phone devices, you must enable file writing permissions on the device storage. + +To save the image in the photo album on iOS devices, you must enable permission to access the device storage in the "Info" file. Add the following code snippet to the "Info" file: @@ -66,11 +68,11 @@ Add the following code snippet to the "Info" file: {% endtabs %} -## Get the Stream of the Chart +## Get the stream of Chart -The [GetStreamAsync](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_GetStreamAsync_Syncfusion_Maui_Toolkit_ImageFileFormat_) method of [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) is used to asynchronously get the chart view as a stream in the desired ImageFileFormat. The output stream can be passed as input to other components that accept streams, such as PDF, Excel, and Word. The supported image file formats are **JPEG and PNG**. +The [GetStreamAsync](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_GetStreamAsync_Syncfusion_Maui_Toolkit_ImageFileFormat_) method of [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) is used to asynchronously get the chart view as a stream in the desired ImageFileFormat. The output stream can be passed as an input to other components that accept streams, such as PDF, Excel, and Word. The supported image file formats are **JPEG and PNG**. -N> The chart stream can only be rendered when the chart view is added to the visual tree. +N> The charts stream can only be rendered when the chart view is added to the visual tree. The following code snippet demonstrates the usage of this method: @@ -93,5 +95,3 @@ await chart.GetStreamAsync(ImageFileFormat.Jpeg); {% endhighlight %} {% endtabs %} - - diff --git a/maui-toolkit/Circular-Charts/Getting-Started.md b/maui-toolkit/Circular-Charts/Getting-Started.md index 486b9eb1..e111b420 100644 --- a/maui-toolkit/Circular-Charts/Getting-Started.md +++ b/maui-toolkit/Circular-Charts/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with .NET MAUI Chart Control | Syncfusion -description: Learn how to get started with Syncfusion® .NET MAUI Chart (SfCircularChart) control, its elements, and more. +title: Getting Started with .NET MAUI Chart control | Syncfusion +description: Learn here all about getting started with Syncfusion® .NET MAUI Chart (SfCircularChart) control, its elements, and more. platform: maui-toolkit control: SfCircularChart documentation: ug @@ -16,24 +16,24 @@ This section explains how to populate the Circular Chart with data, including ad ## Prerequisites -Before proceeding, ensure the following are set up: +Before proceeding, ensure that the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.8 or later). -## Step 1: Create a New .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New > Project** and choose the **.NET MAUI App** template. -2. Name the project and choose a location. Then, click **Next**. -3. Select the .NET framework version and click **Create**. +2. Name the project and choose a location. Then, click **Next.** +3. Select the .NET framework version and click **Create.** ## Step 2: Install the Syncfusion® MAUI Toolkit Package -1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. +1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** 2. Search for [Syncfusion.Maui.Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/) and install the latest version. 3. Ensure the necessary dependencies are installed correctly, and the project is restored. -## Step 3: Register the Handler +## Step 3: Register the handler In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. @@ -88,7 +88,8 @@ In the **MauiProgram.cs** file, register the handler for Syncfusion® using Syncfusion.Maui.Toolkit.Charts; -// ... +. . . + public partial class MainPage : ContentPage { public MainPage() @@ -110,18 +111,18 @@ public partial class MainPage : ContentPage ## Prerequisites -Before proceeding, ensure the following are set up: +Before proceeding, ensure that the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. 2. Set up a .NET MAUI environment with Visual Studio Code. -3. Ensure that the .NET MAUI extension is installed and configured as described [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). +3. Ensure that the .NET MAUI extension is installed and configured as described [here.](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code) -## Step 1: Create a New .NET MAUI Project +## Step 1: Create a new .NET MAUI project -1. Open the command palette by pressing `Ctrl+Shift+P`, type **.NET: New Project**, and press Enter. +1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. 2. Choose the **.NET MAUI App** template. -3. Select the project location, type the project name, and press **Enter**. -4. Then choose **Create project**. +3. Select the project location, type the project name and press **Enter.** +4. Then choose **Create project.** ## Step 2: Install the Syncfusion® MAUI Toolkit Package @@ -130,7 +131,7 @@ Before proceeding, ensure the following are set up: 3. Run the command `dotnet add package Syncfusion.Maui.Toolkit` to install the Syncfusion® .NET MAUI Toolkit NuGet package. 4. To ensure all dependencies are installed, run `dotnet restore`. -## Step 3: Register the Handler +## Step 3: Register the handler In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. @@ -211,22 +212,22 @@ public partial class MainPage : ContentPage Before proceeding, ensure the following are set up: 1. Ensure you have the latest version of JetBrains Rider. -2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. -3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). +2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) -## Step 1: Create a New .NET MAUI Project +## Step 1: Create a new .NET MAUI Project -1. Go to **File > New Solution**, select .NET (C#), and choose the .NET MAUI App template. +1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. 2. Enter the Project Name, Solution Name, and Location. -3. Select the .NET framework version and click **Create**. +3. Select the .NET framework version and click Create. ## Step 2: Install the Syncfusion® MAUI Toolkit NuGet Package -1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. +1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** 2. Search for [Syncfusion.Maui.Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/) and install the latest version. -3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, open the Terminal in Rider and manually run: `dotnet restore` +3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, Open the Terminal in Rider and manually run: `dotnet restore` -## Step 3: Register the Handler +## Step 3: Register the handler In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. @@ -281,7 +282,8 @@ In the **MauiProgram.cs** file, register the handler for Syncfusion® using Syncfusion.Maui.Toolkit.Charts; -// ... +. . . + public partial class MainPage : ContentPage { public MainPage() @@ -300,7 +302,7 @@ public partial class MainPage : ContentPage {% endtabcontent %} {% endtabcontents %} -### Initialize ViewModel +### Initialize view model Define a simple data model to represent a data point in the chart: @@ -370,7 +372,8 @@ N> If you prefer to set the `BindingContext` in XAML, make sure to add the appro using Syncfusion.Maui.Toolkit.Charts; -// ... +. . . + public partial class MainPage : ContentPage { public MainPage() @@ -387,20 +390,20 @@ public partial class MainPage : ContentPage {% endtabs %} -### Populate Chart with Data +### Populate chart with data -Add [PieSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html) to the chart's [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html#Syncfusion_Maui_Toolkit_Charts_SfCircularChart_Series) collection and bind `Data` to the series [ItemsSource](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_ItemsSource) property from its BindingContext to create a Product Sales Pie chart. +Adding [PieSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html) to the charts [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html#Syncfusion_Maui_Toolkit_Charts_SfCircularChart_Series) collection and binding `Data` to the series [ItemsSource](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_ItemsSource) property from its BindingContext to create our own Product Sales Pie chart. N> The circular chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html#Syncfusion_Maui_Toolkit_Charts_SfCircularChart_Series) as its default content. -N> To plot the series, the [XBindingPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_XBindingPath) and [YBindingPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_YBindingPath) properties must be configured so the chart can retrieve values from the respective properties in the data model. +N> To plot the series, the [XBindingPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_XBindingPath) and [YBindingPath](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_YBindingPath) properties must be configured so that the chart may get values from the respective properties in the data model. {% tabs %} {% highlight xaml %} - + . . . @@ -427,9 +430,9 @@ this.Content = chart; {% endtabs %} -### Add a Title +### Add a title -The title provides quick information to the user about the data being plotted in the chart. You can set the title using the [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Title) property of the circular chart as follows. +The title of the chart acts as the title to provide quick information to the user about the data being plotted in the chart. You can set title using the [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Title) property of circular chart as follows. {% tabs %} @@ -459,16 +462,16 @@ this.Content = chart; {% endtabs %} -### Enable Data Labels +### Enable the data labels -The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_ShowDataLabels) property of the series can be used to enable data labels, improving the readability of the circular chart. The label visibility is set to `False` by default. +The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_ShowDataLabels) property of series can be used to enable data labels to improve the readability of the circular chart. The label visibility is set to `False` by default. {% tabs %} {% highlight xaml %} - + . . . @@ -477,7 +480,7 @@ The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui {% highlight C# %} SfCircularChart chart = new SfCircularChart(); -// Other chart configurations +. . . PieSeries series = new PieSeries(); series.ShowDataLabels = true; // Enable data labels for the series chart.Series.Add(series); @@ -486,7 +489,7 @@ this.Content = chart; {% endtabs %} -### Enable a Legend +### Enable a legend The legend provides information about the data point displayed in the circular chart. The [Legend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Legend) property of the chart was used to enable it. @@ -495,7 +498,7 @@ The legend provides information about the data point displayed in the circular c {% highlight xaml %} - + . . . @@ -506,7 +509,7 @@ The legend provides information about the data point displayed in the circular c {% highlight C# %} SfCircularChart chart = new SfCircularChart(); -// Other chart configurations +. . . // Initialize and assign a new ChartLegend to the chart's Legend property chart.Legend = new ChartLegend(); this.Content = chart; @@ -516,7 +519,7 @@ this.Content = chart; ### Enable Tooltip -Tooltips are used to show information about the segment when the mouse hovers over it. Enable tooltips by setting the series [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_EnableTooltip) property to true. +Tooltips are used to show information about the segment, when mouse over on it. Enable tooltip by setting series [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_EnableTooltip) property as true. {% tabs %} @@ -623,4 +626,3 @@ public partial class MainPage : ContentPage ![Pie chart in .NET MAUI Chart](Getting-Started_Images/MAUI_pie_chart.png) You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/maui-toolkit-samples/tree/master/CircularChart/GettingStarted). - diff --git a/maui-toolkit/Circular-Charts/GroupTo.md b/maui-toolkit/Circular-Charts/GroupTo.md index f52d0197..98859040 100644 --- a/maui-toolkit/Circular-Charts/GroupTo.md +++ b/maui-toolkit/Circular-Charts/GroupTo.md @@ -1,7 +1,7 @@ --- layout: post -title: Grouping Data Points in .NET MAUI Chart Control | Syncfusion -description: Learn how to group data points in Syncfusion® .NET MAUI Chart (SfCircularChart) control for better visualization. +title: Grouping data points in .NET MAUI Chart control | Syncfusion +description: This section explains about how to group data points in Syncfusion® .NET MAUI Chart (SfCircularChart) control. platform: maui-toolkit control: SfCircularChart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Grouping Data Points in .NET MAUI SfCircularChart -The small segments in the circular chart can be grouped into an `Others` category using the [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) and [GroupMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupMode) properties of the [PieSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html). The [GroupMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupMode) property is used to specify the grouping type based on slice angle, actual data point value, or percentage. The [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) property is used to set the limit to group data points into a single slice. The grouped segment is labeled as `Others` in the chart legend. +The small segments in the circular chart can be grouped into an `Others` category using the [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) and [GroupMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupMode) properties of the [PieSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html). The [GroupMode]() property is used to specify the grouping type based on slice angle, actual data point value, or percentage. The [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) property is used to set the limit to group data points into a single slice. The grouped segment is labeled as `Others` in the chart legend. -N> [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) is only supported for pie and doughnut charts. +N> [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) only support for pie and doughnut chart. {% tabs %} diff --git a/maui-toolkit/Circular-Charts/Legend.md b/maui-toolkit/Circular-Charts/Legend.md index 45e395f8..365a6fcd 100644 --- a/maui-toolkit/Circular-Charts/Legend.md +++ b/maui-toolkit/Circular-Charts/Legend.md @@ -1,7 +1,7 @@ --- layout: post -title: Legend in .NET MAUI Chart Control | Syncfusion -description: Learn how to initialize and customize the legend in Syncfusion® .NET MAUI Chart (SfCircularChart) control. +title: Legend in .NET MAUI Chart control | Syncfusion +description: This section explains about how to initialize legend and its customization in Syncfusion® .NET MAUI Chart (SfCircularChart) control. platform: maui-toolkit control: SfCircularChart documentation: ug @@ -11,7 +11,7 @@ keywords: .net maui circular chart, chart legend, legend-wrap, legend view, lege # Legend in .NET MAUI Chart (SfCircularChart) The [Legend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Legend) provides a list of data points, helping to identify the corresponding data points in the chart. Here's a detailed guide on how to define and customize the legend in the circular chart. -## Defining the Legend +## Defining the legend To define the legend in the chart, initialize the [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) class and assign it to the [Legend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Legend) property. {% tabs %} @@ -24,6 +24,7 @@ To define the legend in the chart, initialize the [ChartLegend](https://help.syn + {% endhighlight %} {% highlight c# %} @@ -31,12 +32,13 @@ To define the legend in the chart, initialize the [ChartLegend](https://help.syn SfCircularChart chart = new SfCircularChart(); // Create and assign a new ChartLegend to the chart's Legend property chart.Legend = new ChartLegend(); +. . . this.Content = chart; {% endhighlight %} {% endtabs %} -## Legend Visibility +## Legend visibility The visibility of the chart legend can be controlled using the [IsVisible](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_IsVisible) property. By default, the IsVisible property is set to `true`. {% tabs %} @@ -57,15 +59,16 @@ SfCircularChart chart = new SfCircularChart(); chart.Legend = new ChartLegend() { - IsVisible = true + IsVisible = true // Set the visibility of the legend to true }; +. . . this.Content = chart; {% endhighlight %} {% endtabs %} -## Legend Item Visibility +## Legend item visibility The visibility of individual legend items for specific series can be controlled using the [IsVisibleOnLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_IsVisibleOnLegend) property of the series. The default value for IsVisibleOnLegend is `true`. @@ -105,7 +108,7 @@ this.Content = chart; {% endtabs %} -## Customizing Labels +## Customizing labels The appearance of the legend label can be customized using the [`LabelStyle`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_LabelStyle) property. @@ -226,7 +229,7 @@ this.Content = chart; {% endtabs %} -## Toggle the Series Visibility +## Toggle the series visibility The visibility of circular series data points can be controlled by tapping the legend item using the [ToggleSeriesVisibility](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ToggleSeriesVisibility) property. The default value of ToggleSeriesVisibility is `false`. {% tabs %} @@ -248,7 +251,7 @@ The visibility of circular series data points can be controlled by tapping the l SfCircularChart chart = new SfCircularChart(); chart.Legend = new ChartLegend() { - ToggleSeriesVisibility = true + ToggleSeriesVisibility = true // Enable the functionality to show/hide series by tapping on legends }; this.Content = chart; @@ -256,7 +259,7 @@ this.Content = chart; {% endtabs %} -## Legend Maximum Size Request +## Legend maximum size request To set the maximum size request for the legend view, override the [GetMaximumSizeCoefficient](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_GetMaximumSizeCoefficient) protected method in [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) class. The value should be between 0 and 1, representing the maximum size request, not the desired size for the legend items layout. {% tabs %} @@ -292,11 +295,12 @@ this.Content = chart; {% endtabs %} -## Items Layout +## Items layout The [ItemsLayout](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ItemsLayout) property is used to customize the arrangement and position of each legend item. The default value is `null`. This property accepts any layout type. -For more details about the layout alignment, refer to this [article](https://support.syncfusion.com/kb/article/16201/how-to-align-the-chart-legend-items-in-net-maui-circular-chart). +For more details about the layout alignment refer to this [article](https://support.syncfusion.com/kb/article/16201/how-to-align-the-chart-legend-items-in-net-maui-circular-chart). + {% tabs %} @@ -319,6 +323,7 @@ For more details about the layout alignment, refer to this [article](https://sup {% highlight c# %} SfCircularChart chart = new SfCircularChart(); +. . . ChartLegend legend = new ChartLegend(); legend.ItemsLayout = new FlexLayout() { @@ -333,8 +338,8 @@ this.Content = chart; {% endtabs %} -## Item Template -The [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) supports customizing the appearance of legend items using the [ItemTemplate](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ItemTemplate) property. The default value of ItemTemplate is `null`. +## Item template +The [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) supports customizing the appearance of legend items using the [ItemTemplate](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ItemTemplate) property. The default value of ItemsTemplate is `null`. N> The BindingContext of the template is the corresponding underlying legend item provided in the ChartLegendItem class. @@ -407,4 +412,4 @@ The [`LegendItemCreated`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion * When using BindableLayouts, do not bind ItemsSource explicitly. * For better UX, arrange items vertically for left and right dock positions, and horizontally for top and bottom dock positions. * If the layout's measured size is larger than the MaximumHeightRequest, scrolling will be enabled. -* If MaximumHeightRequest is set to 1 and the chart's available size is smaller than the layout's measured size, the series may not have enough space to draw properly. +* If MaximumHeightRequest is set to 1 and the chart's available size is smaller than the layout's measured size, the series may not have enough space to draw properly. \ No newline at end of file diff --git a/maui-toolkit/Circular-Charts/Overview.md b/maui-toolkit/Circular-Charts/Overview.md index 748090b6..0306e053 100644 --- a/maui-toolkit/Circular-Charts/Overview.md +++ b/maui-toolkit/Circular-Charts/Overview.md @@ -1,7 +1,7 @@ --- layout: post title: About .NET MAUI Chart Control | Syncfusion -description: Learn about the introduction of Syncfusion® .NET MAUI Chart (SfCircularChart) control with key features and more. +description: Learn here all about introduction of Syncfusion® .NET MAUI Chart(SfCircularChart) control with key features and more. platform: maui-toolkit control: SfCircularChart documentation: ug diff --git a/maui-toolkit/Circular-Charts/PieChart.md b/maui-toolkit/Circular-Charts/PieChart.md index 44c42682..7b8d3e4c 100644 --- a/maui-toolkit/Circular-Charts/PieChart.md +++ b/maui-toolkit/Circular-Charts/PieChart.md @@ -2,8 +2,6 @@ layout: post title: Pie Chart in .NET MAUI Chart control | Syncfusion description: Learn here all about the pie chart and its features in Syncfusion® .NET MAUI Chart (SfCircularChart) control. -title: Pie Chart in .NET MAUI Chart Control | Syncfusion -description: Learn about the pie chart and its features in Syncfusion® .NET MAUI Chart (SfCircularChart) control. platform: maui-toolkit control: SfCircularChart documentation: ug @@ -29,7 +27,6 @@ N> The circular chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/S {% highlight c# %} -{% highlight c# src/MainPage.xaml.cs %} SfCircularChart chart = new SfCircularChart(); // Create an instance of PieSeries diff --git a/maui-toolkit/Circular-Charts/RadialBarChart.md b/maui-toolkit/Circular-Charts/RadialBarChart.md index 0d0b1fe7..01afebae 100644 --- a/maui-toolkit/Circular-Charts/RadialBarChart.md +++ b/maui-toolkit/Circular-Charts/RadialBarChart.md @@ -1,7 +1,7 @@ --- layout: post -title: Radial Bar Chart in .NET MAUI Chart Control | Syncfusion -description: Learn about radial bar chart and its features in Syncfusion® .NET MAUI Chart (SfCircularChart) control. +title: Radial Bar chart in .NET MAUI Chart control | Syncfusion +description: Learn here all about radial bar chart and its features in Syncfusion® .NET MAUI Chart Chart (SfCircularChart) control. platform: maui-toolkit control: SfCircularChart documentation: ug @@ -21,7 +21,7 @@ The following properties can be used to customize the appearance of the radial b * [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_StrokeWidth) - To customize the width of the stroke in chart segments. - * [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_GapRatio) - To customize the spacing between each chart segment. + * [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_GapRatio) - To customize the spacing between each chart segments. * [MaximumValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_MaximumValue) - To represent the span of the segment-filled area in the radial bar track. The default value of this property is `double.NaN`. @@ -59,7 +59,7 @@ this.Content = chart; ![.NET MAUI Radial bar chart](Chart-Types_images/maui_radialbar_chart.png) -## Changing the Radial Bar Size +## Changing the radial bar size You can use the [Radius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_Radius) property to change the radial bar chart size. The default value of the radius is `0.8`. @@ -95,7 +95,7 @@ this.Content = chart; ![.NET MAUI Radial bar chart radius customization](Chart-Types_images/maui_radius.png) -## Changing the Radial Bar Inner Radius +## Changing the radial bar inner radius The [InnerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_InnerRadius) property of radial bar series is used to define the inner circle. The default value of this property is `0.4`. @@ -107,7 +107,7 @@ The [InnerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.To + InnerRadius = "0.1"/> {% endhighlight %} @@ -120,7 +120,7 @@ RadialBarSeries series = new RadialBarSeries(); series.ItemsSource = (new SalesViewModel()).Data; series.XBindingPath = "Product"; series.YBindingPath = "SalesRate"; -series.InnerRadius = 0.1; // Set the inner radius of the radial bar chart, which determines the center emptiness of the chart +series.InnerRadius = 0.1; // Set the inner radius of the radial bar chart, which determine the center emptiness of the chart chart.Series.Add(series); this.Content = chart; @@ -131,11 +131,11 @@ this.Content = chart; ![.NET MAUI Radial bar chart inner radius customization](Chart-Types_images/maui_inner_radius.png) -## CapStyle Customization +## CapStyle customization The [CapStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CapStyle) property of the radial bar series is used to specify the shape of the start and end points of the circular segment. The default value of this property is `Both.Flat`. -The following types are available for [CapStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CapStyle) property: +The following types are available for [CapStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CapStyle) property. * [BothFlat](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CapStyle.html#Syncfusion_Maui_Toolkit_Charts_CapStyle_BothFlat) - Start and end positions of the segment should be updated with a flat shape. @@ -157,7 +157,7 @@ You can customize the CapStyle property of the radial bar based on its types. + CapStyle = "BothCurve"/> {% endhighlight %} @@ -181,9 +181,9 @@ this.Content = chart; ![.NET MAUI Radial bar chart cap style customization](Chart-Types_images/maui_bothcurve.png) -## Segment Spacing +## Segment spacing -The [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_GapRatio) property of the radial bar series is used to define the spacing between each segment. The default value of this property is `0.2`. +The [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_GapRatio) property of the radial bar series is used to define the spacing between each segments. The default value of this property is `0.2`. {% tabs %} @@ -219,15 +219,15 @@ this.Content = chart; ![.NET MAUI Radial bar chart segment spacing customization](Chart-Types_images/maui_gapratio.png) -## Track Customization +## Track customization -You can use the following properties to customize the appearance of the circular bar track: +You can use the following properties to customize the appearance of the circular bar track. * [TrackStroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_TrackStroke) - To customize the circular bar border color. * [TrackStrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_TrackStrokeWidth) - To customize the border width of the circular bar. - * [TrackFill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_TrackFill) - To customize the circular bar area which is behind the radial bar segments. + * [TrackFill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_TrackFill) - To customize the circular bar area which behind the radial bar segments. {% tabs %} @@ -266,11 +266,11 @@ this.Content = chart; ## CenterView -Any view can be added to the center of the radial bar chart using the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterView) property of [RadialBarSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html). The view placed in the center of the radial bar chart is useful for sharing additional information about the radial bar chart. The binding context of the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterView) will be the respective radial bar series. + Any view can be added to the center of the radial bar chart using the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterView) property of [RadialBarSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html). The view placed in the center of the radial bar chart is useful for sharing additional information about the radial bar chart.The binding context of the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterView) will be the respective radial bar series. ### CenterHoleSize -The [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterHoleSize) property of RadialBarSeries is used to get the diameter value of the center hole. Using the CenterHoleSize, we can prevent the view in the radial bar center from overlapping with the series. +The [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterHoleSize) property of RadialBarSeries is used to get the diameter value of the center hole. Using the CenterHoleSize, we can protect the view in the radial bar center from overlapping with the series {% tabs %} @@ -320,4 +320,3 @@ this.Content = chart; {% endtabs %} ![.NET MAUI Radial bar chart center view customization](Chart-Types_images/maui_radialbarchart_centerview.png) - diff --git a/maui-toolkit/Circular-Charts/Selection.md b/maui-toolkit/Circular-Charts/Selection.md index 59bad46a..fec65390 100644 --- a/maui-toolkit/Circular-Charts/Selection.md +++ b/maui-toolkit/Circular-Charts/Selection.md @@ -1,7 +1,7 @@ --- layout: post -title: Selection in .NET MAUI Chart Control | Syncfusion -description: Learn how to configure the selection support and its features in Syncfusion® .NET MAUI Chart (SfCircularChart) control. +title: Selection in .NET MAUI Chart control | Syncfusion +description: This section explains about how to configure the selection support and its features applying in .NET MAUI Chart (SfCircularChart). platform: maui-toolkit control: SfCircularChart documentation: ug @@ -11,7 +11,7 @@ documentation: ug The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) provides selection behavior support, which allows you to select or highlight a segment (data points) in a series using the [DataPointSelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataPointSelectionBehavior.html). -## Enable Selection +## Enable selection To enable the data point selection, create an instance of the series [SelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_SelectionBehavior) property. @@ -42,7 +42,7 @@ DataPointSelectionBehavior selection = new DataPointSelectionBehavior() }; DoughnutSeries series = new DoughnutSeries(); -// ... +. . . series.SelectionBehavior = selection; // Set the selection behavior for this series chart.Series.Add(series); this.Content = chart; @@ -51,7 +51,7 @@ this.Content = chart; {% endtabs %} -## Behavior Customization +## Behavior customization The following properties are used to customize the [ChartSelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSelectionBehavior.html): diff --git a/maui-toolkit/Circular-Charts/Tooltip.md b/maui-toolkit/Circular-Charts/Tooltip.md index 11075405..f3f8b961 100644 --- a/maui-toolkit/Circular-Charts/Tooltip.md +++ b/maui-toolkit/Circular-Charts/Tooltip.md @@ -1,7 +1,7 @@ --- layout: post -title: Tooltip in .NET MAUI Chart Control | Syncfusion -description: Learn how to enable tooltip and customize it in Syncfusion® .NET MAUI Chart (SfCircularChart) control. +title: Tooltip in .NET MAUI Chart control | Syncfusion +description: This section explains about how to enable tooltip and its customization in Syncfusion® .NET MAUI Chart (SfCircularChart) control platform: maui-toolkit control: SfCircularChart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Tooltip in .NET MAUI Chart -Tooltip is used to display information or metadata of the tapped segment. The Circular Chart provides tooltip support for all series. +Tooltip is used to display any information or metadata of the tapped segment. The Circular Chart provides tooltip support for all series. ## Define Tooltip @@ -20,7 +20,7 @@ To define the tooltip in the chart, set the [EnableTooltip](https://help.syncfus {% highlight xaml %} - + . . . @@ -29,7 +29,7 @@ To define the tooltip in the chart, set the [EnableTooltip](https://help.syncfus {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -// Other chart configurations +. . . PieSeries series = new PieSeries(); series.EnableTooltip = true; // Enable tooltips for this series chart.Series.Add(series); @@ -41,7 +41,7 @@ this.Content = chart; ![Tooltip support in MAUI chart](Tooltip_images/maui_chart_tooltip.png) -The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) is used to customize the tooltip. For customizing the tooltip, create an instance of [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) and set it to the [TooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_TooltipBehavior) property of [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html). The following properties are used to customize the tooltip: +The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) is used to customize the tooltip. For customizing the tooltip, create an instance [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) and set it to the [TooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_TooltipBehavior) property of [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html). The following properties are used to customize the tooltip: * [Background](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Background) - Gets or sets the background color to the tooltip label. * [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontAttributes) - Gets or sets the font style for the label. @@ -56,7 +56,7 @@ The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusio {% highlight xml %} - + . . . @@ -67,7 +67,7 @@ The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusio {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -// Other chart configurations +. . . chart.TooltipBehavior = new ChartTooltipBehavior() { Duration = 2000, // Set the tooltip display duration @@ -86,7 +86,7 @@ Circular chart provides support to customize the appearance of the tooltip by us {% highlight xaml %} - + . . . @@ -117,7 +117,7 @@ Circular chart provides support to customize the appearance of the tooltip by us XBindingPath="Product" YBindingPath="SalesRate" TooltipTemplate="{StaticResource tooltipTemplate}"/> - + . . . {% endhighlight %} @@ -125,11 +125,12 @@ Circular chart provides support to customize the appearance of the tooltip by us {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -// Other chart configurations +. . . PieSeries series = new PieSeries(); series.EnableTooltip = true; series.TooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate; // Set a custom tooltip template from the chart's resources -// Other series configurations +. . . + this.Content = chart; {% endhighlight %} @@ -137,4 +138,3 @@ this.Content = chart; {% endtabs %} ![Tooltip template in MAUI Chart](Tooltip_images/maui_chart_tooltip_customization.png) - diff --git a/maui-toolkit/Funnel-Charts/Appearance.md b/maui-toolkit/Funnel-Charts/Appearance.md index 369163b2..10b820a4 100644 --- a/maui-toolkit/Funnel-Charts/Appearance.md +++ b/maui-toolkit/Funnel-Charts/Appearance.md @@ -1,7 +1,7 @@ --- layout: post -title: Appearance in .NET MAUI Chart Control | Syncfusion -description: Learn about appearance customization in Syncfusion® .NET MAUI Chart (SfFunnelChart), including palettes and gradients. +title: Appearance in .NET MAUI Chart control Syncfusion +description: Learn here all about appearance customization in .NET MAUI Chart (SfFunnelChart), its elements and more. platform: maui-toolkit control: SfFunnelChart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Appearance in .NET MAUI Funnel Chart -The appearance of the [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html) can be customized by using predefined palettes, custom palettes, and gradients which allow enriching the application. +The appearance of the [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html) can be customized by using the predefined palettes, custom palettes, and gradient which allows enriching the application. ## Custom PaletteBrushes @@ -23,7 +23,7 @@ The [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui. XBindingPath="XValue" YBindingPath="YValue" PaletteBrushes="{Binding CustomBrushes}"> - +. . . {% endhighlight %} @@ -38,7 +38,7 @@ public class AdmissionViewModel public AdmissionViewModel() { - // Initializing CustomBrushes collection to add custom palette colors. + //Initializing CustomBrushes collection to add custom palette colors. CustomBrushes = new List(); CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(38, 198, 218))); CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 188, 212))); @@ -46,7 +46,7 @@ public class AdmissionViewModel CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 151, 167))); CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 131, 143))); } - // Other view model code +. . . } {% endhighlight %} @@ -67,7 +67,7 @@ The gradient for the funnel chart can be set by using the [PaletteBrushes](https XBindingPath="XValue" YBindingPath="YValue" PaletteBrushes="{Binding CustomBrushes}"> - +. . . {% endhighlight %} @@ -79,11 +79,9 @@ public class AdmissionViewModel public ObservableCollection Data { get; set; } public List CustomBrushes { get; set; } - public AdmissionViewModel() { CustomBrushes = new List(); - LinearGradientBrush gradientColor1 = new LinearGradientBrush(); gradientColor1.GradientStops = new GradientStopCollection() { @@ -119,14 +117,14 @@ public class AdmissionViewModel new GradientStop() { Offset = 0, Color = Color.FromArgb("#56C596") } }; - // Adding gradient brushes to the custom brushes collection. + //Adding gradient brush to the custom brushes collection. CustomBrushes.Add(gradientColor1); CustomBrushes.Add(gradientColor2); CustomBrushes.Add(gradientColor3); CustomBrushes.Add(gradientColor4); CustomBrushes.Add(gradientColor5); } - // Other view model code +. . . } {% endhighlight %} @@ -134,4 +132,3 @@ public class AdmissionViewModel {% endtabs %} ![Gradient support in MAUI Chart](Appearance_images/MAUI_funnel_chart.png) - diff --git a/maui-toolkit/Funnel-Charts/DataLabels.md b/maui-toolkit/Funnel-Charts/DataLabels.md index 61e88d61..c40d2c50 100644 --- a/maui-toolkit/Funnel-Charts/DataLabels.md +++ b/maui-toolkit/Funnel-Charts/DataLabels.md @@ -1,7 +1,7 @@ --- layout: post -title: Data Labels in .NET MAUI Chart Control | Syncfusion -description: Learn how to configure data labels and their features in Syncfusion® .NET MAUI Chart (SfFunnelChart) control. +title: Data label in .NET MAUI Chart control | .NET MAUI | Syncfusion +description: This section explains about how to configure the data labels and its features in .NET MAUI Chart (SfFunnelChart). platform: maui-toolkit control: SfFunnelChart documentation: ug @@ -9,18 +9,18 @@ documentation: ug # Data Labels in .NET MAUI Chart -Data labels are used to display values related to a chart segment. Values from data point (x, y) or other custom properties from a data source can be displayed. +Data labels are used to display values related to a chart segment. Values from data point(x, y) or other custom properties from a data source can be displayed. ## Enable Data Labels -To define data labels in the chart, set the [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_ShowDataLabels) property to true. The default value of the [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_ShowDataLabels) property is false. +To define the data label in the chart, set the [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_ShowDataLabels) property to true. The default value of [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_ShowDataLabels) property is false. {% tabs %} {% highlight xaml %} - - + +. . . {% endhighlight %} @@ -28,21 +28,21 @@ To define data labels in the chart, set the [ShowDataLabels](https://help.syncfu {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); -// Other chart configurations +. . . chart.ShowDataLabels = true; // Enable data labels for the chart. this.Content = chart; {% endhighlight %} {% endtabs %} -## Data Label Customization +## Data label customization -Data labels can be customized by using the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_DataLabelSettings) property of the chart. For customization, you need to create an instance of [FunnelDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FunnelDataLabelSettings.html) and set it to the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_DataLabelSettings) property. The following properties, which are available in [FunnelDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FunnelDataLabelSettings.html), are used to customize the data labels: + Data labels can be customized by using the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_DataLabelSettings) property of the chart. For customizing, need to create an instance of [FunnelDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FunnelDataLabelSettings.html) and set to the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_DataLabelSettings) property.The following properties, which are available in [FunnelDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FunnelDataLabelSettings.html), are used to customize the data labels. -* [LabelPlacement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelPlacement) - Used to position the funnel chart data labels at [Auto](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Auto), [Inner](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Inner), [Center](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Center) and [Outer](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Outer). -* [UseSeriesPalette](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) - Used to set the interior of the chart to the data label background. -* [Context](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FunnelDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_FunnelDataLabelSettings_Context) of type `FunnelDataLabelContext`, indicates whether to show x or y value in the label content. -* [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelStyle) - Used to customize the data label's appearance. The following properties are available in [ChartDataLabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelStyle.html): + * [`LabelPlacement`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelPlacement) - It used to position the funnel chart data labels at [Auto](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Auto), [Inner](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Inner), [Center](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Center) and [Outer](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataLabelPlacement.html#Syncfusion_Maui_Toolkit_Charts_DataLabelPlacement_Outer). + * [`UseSeriesPalette`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) - It used to set the interior of the chart to the data label background. + * [`Context`]() of type `FunnelDataLabelContext`, indicates weather to show x or y value in the label content. + * [`LabelStyle`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelStyle) - It used to customize the data label's appearance. The following properties, which are available in [LabelStyle](). * [Margin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_Margin) of type `Thickness`, indicates the label's margin. * [Background](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_Background), of type `Brush`, indicates the label background color. * [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_FontAttributes), of type `FontAttributes`, indicates the font style of the data label. @@ -57,7 +57,7 @@ Data labels can be customized by using the [DataLabelSettings](https://help.sync {% highlight xaml %} - + . . . The chart view can be exported as an image only when the chart view is added to the visual tree. @@ -22,7 +22,7 @@ The following code snippet demonstrates the usage of this method: {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); -// Other chart configurations +... this.Content = chart; chart.SaveAsImage("ChartSample.jpeg"); // Export the chart view as an image in the JPEG format. @@ -30,19 +30,19 @@ chart.SaveAsImage("ChartSample.jpeg"); // Export the chart view as an image in t {% endtabs %} -T> You can change the image format in the code above by changing its extension to .jpg or .png. +T> We can change the image formats in above code by changing its extension as .jpg, .png. -The exported image will be saved in different locations depending on the platform: +The exported image will be saved in the different location across the platforms. -**Windows Phone, Android, and macOS** – The image will be saved inside the 'Pictures' directory of the file system. +**Windows Phone, Android and MAC** – The image will be saved inside the 'Pictures' directory of the file system. **iOS** – The image will be saved inside the 'Photos/Album' directory of the file system. -To save the image on Android and Windows Phone devices, you must enable file writing permissions in the device storage. +To save the image on Android and Windows Phone devices, you must enable file writing permissions on the device storage. -To save the image in the photo album on iOS devices, you must enable permission to access the device storage in the Info.plist file. +To save the image in the photo album on iOS devices, you must enable permission to access the device storage in the "Info" file. -Add the following code snippet to the Info.plist file: +Add the following code snippet to the "Info" file: {% tabs %} @@ -61,11 +61,11 @@ Add the following code snippet to the Info.plist file: {% endtabs %} -## Get the Stream of the Chart +## Get the stream of Chart -The [GetStreamAsync](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_GetStreamAsync_Syncfusion_Maui_Toolkit_ImageFileFormat_) method of [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html) is used to asynchronously get the chart view as a stream in the desired ImageFileFormat. The output stream can be passed as input to other components that accept streams, such as PDF, Excel, and Word. The supported image file formats are **JPEG and PNG**. +The [GetStreamAsync](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_GetStreamAsync_Syncfusion_Maui_Toolkit_ImageFileFormat_) method of [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html) is used to asynchronously get the chart view as a stream in the desired ImageFileFormat. The output stream can be passed as an input to other components that accept streams, such as PDF, Excel, and Word. The supported image file formats are **JPEG and PNG**. -N> The chart stream can only be rendered when the chart view is added to the visual tree. +N> The charts stream can only be rendered when the chart view is added to the visual tree. The following code snippet demonstrates the usage of this method: @@ -74,7 +74,7 @@ The following code snippet demonstrates the usage of this method: {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); -// Other chart configurations +... this.Content = chart; await chart.GetStreamAsync(ImageFileFormat.Jpeg); // Get the chart view as a stream in the JPEG format. diff --git a/maui-toolkit/Funnel-Charts/Getting-Started.md b/maui-toolkit/Funnel-Charts/Getting-Started.md index f63664c5..8d3011d0 100644 --- a/maui-toolkit/Funnel-Charts/Getting-Started.md +++ b/maui-toolkit/Funnel-Charts/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with .NET MAUI Chart Control | Syncfusion -description: Learn how to get started with Syncfusion® .NET MAUI Chart (SfFunnelChart) control, its elements, and more. +title: Getting Started with .NET MAUI Chart control | Syncfusion +description: Learn here all about getting started with Syncfusion® .NET MAUI Chart (SfFunnelChart) control, its elements, and more. platform: maui-toolkit control: SfFunnelChart documentation: ug @@ -16,24 +16,24 @@ This section explains how to populate the Funnel Chart with data, including addi ## Prerequisites -Before proceeding, ensure the following are set up: +Before proceeding, ensure that the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.8 or later). -## Step 1: Create a New .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New > Project** and choose the **.NET MAUI App** template. -2. Name the project and choose a location. Then, click **Next**. -3. Select the .NET framework version and click **Create**. +2. Name the project and choose a location. Then, click **Next.** +3. Select the .NET framework version and click **Create.** ## Step 2: Install the Syncfusion® MAUI Toolkit Package -1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. +1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** 2. Search for [Syncfusion.Maui.Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/) and install the latest version. 3. Ensure the necessary dependencies are installed correctly, and the project is restored. -## Step 3: Register the Handler +## Step 3: Register the handler In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. @@ -101,7 +101,7 @@ public partial class MainPage : ContentPage } {% endhighlight %} -{% endtabs %} +{% endtabs %} {% endtabcontent %} @@ -109,18 +109,18 @@ public partial class MainPage : ContentPage ## Prerequisites -Before proceeding, ensure the following are set up: +Before proceeding, ensure that the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. 2. Set up a .NET MAUI environment with Visual Studio Code. -3. Ensure that the .NET MAUI extension is installed and configured as described [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). +3. Ensure that the .NET MAUI extension is installed and configured as described [here.](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code) -## Step 1: Create a New .NET MAUI Project +## Step 1: Create a new .NET MAUI project -1. Open the command palette by pressing `Ctrl+Shift+P`, type **.NET: New Project**, and press Enter. +1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. 2. Choose the **.NET MAUI App** template. -3. Select the project location, type the project name, and press **Enter**. -4. Then choose **Create project**. +3. Select the project location, type the project name and press **Enter.** +4. Then choose **Create project.** ## Step 2: Install the Syncfusion® MAUI Toolkit Package @@ -129,7 +129,7 @@ Before proceeding, ensure the following are set up: 3. Run the command `dotnet add package Syncfusion.Maui.Toolkit` to install the Syncfusion® .NET MAUI Toolkit NuGet package. 4. To ensure all dependencies are installed, run `dotnet restore`. -## Step 3: Register the Handler +## Step 3: Register the handler In the **MauiProgram.cs** file, register the handler for Syncfusion® Toolkit. @@ -594,8 +594,9 @@ public partial class MainPage : ContentPage } {% endhighlight %} + {% endtabs %} ![Funnel chart in .NET MAUI Chart](Getting-Started_Images/MAUI_funnel_chart.png) -You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/maui-toolkit-samples/tree/master/FunnelChart/GettingStarted). +You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/maui-toolkit-samples/tree/master/FunnelChart/GettingStarted). \ No newline at end of file diff --git a/maui-toolkit/Funnel-Charts/Legend.md b/maui-toolkit/Funnel-Charts/Legend.md index 8870e77c..9cbecdaf 100644 --- a/maui-toolkit/Funnel-Charts/Legend.md +++ b/maui-toolkit/Funnel-Charts/Legend.md @@ -1,7 +1,7 @@ --- layout: post -title: Legend in .NET MAUI Chart Control | Syncfusion -description: Learn how to initialize and customize the legend in Syncfusion® .NET MAUI Chart (SfFunnelChart) control. +title: Legend in .NET MAUI Chart control | Syncfusion +description: This section explains about how to initialize legend and its customization in Syncfusion® .NET MAUI Chart (SfFunnelChart) control. platform: maui-toolkit control: SfFunnelChart documentation: ug @@ -12,7 +12,7 @@ keywords: .net maui funnel chart, funnel-chart, chart legend, legend-wrap, legen The [Legend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Legend) provides a list of data points, helping to identify the corresponding data points in the chart. Here's a detailed guide on how to define and customize the legend in the funnel chart. -## Defining the Legend +## Defining the legend To define the legend in the chart, initialize the [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) class and assign it to the [Legend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Legend) property. @@ -46,8 +46,7 @@ this.Content = chart; {% endtabs %} -## Legend Visibility - +## Legend visibility The visibility of the chart legend can be controlled using the [IsVisible](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_IsVisible) property. By default, the IsVisible property is set to `true`. {% tabs %} @@ -83,15 +82,15 @@ this.Content = chart; {% endtabs %} -## Customizing Labels +## Customizing labels The appearance of the legend label can be customized using the [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_LabelStyle) property. -* [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_TextColor) – Gets or sets the color of the label. -* [FontFamily](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontFamily) - Gets or sets the font family for the legend label. -* [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontAttributes) - Gets or sets the font style for the legend label. -* [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontSize) - Gets or sets the font size for the legend label. -* [Margin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_Margin) - Gets or sets the margin size of labels. +* [`TextColor`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_TextColor) – Gets or sets the color of the label. +* [`FontFamily`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontFamily) - Gets or sets the font family for the legend label. +* [`FontAttributes`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontAttributes) - Gets or sets the font style for the legend label. +* [`FontSize`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_FontSize) - Gets or sets the font size for the legend label. +* [`Margin`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLegendLabelStyle_Margin) - Gets or sets the margin size of labels. {% tabs %} @@ -142,8 +141,8 @@ this.Content = chart; ![Legend labels customization support in Maui Chart](Legend-images/legend_label_style.png) -## Legend Icon -To specify the legend icon based on the associated series type, use the [LegendIcon](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_LegendIcon) property and change its type using the [ChartLegendIconType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendIconType.html) enum values. +## Legend icon +To specify the legend icon based on associate series type using the [LegendIcon](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_LegendIcon) and change its type using [ChartLegendIconType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendIconType.html) enum values. {% tabs %} @@ -178,7 +177,6 @@ this.Content = chart; {% endtabs %} ## Placement - The legend can be positioned to the left, right, top, or bottom of the chart area using the [Placement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_Placement) property in the ChartLegend class. The default placement is `Top`. {% tabs %} @@ -215,8 +213,7 @@ this.Content = chart; {% endtabs %} -## Toggle the Series Visibility - +## Toggle the series visibility The visibility of segments in the funnel chart can be controlled by tapping the legend item using the [ToggleSeriesVisibility](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ToggleSeriesVisibility) property. The default value of ToggleSeriesVisibility is `false`. {% tabs %} @@ -226,11 +223,11 @@ The visibility of segments in the funnel chart can be controlled by tapping the - + . . . - + . . . {% endhighlight %} @@ -251,20 +248,20 @@ funnelChart.Legend = new ChartLegend() ToggleSeriesVisibility = true // Enable the toggle visibility of the series using legend. }; -this.Content = funnelChart; +this.Content = chart; {% endhighlight %} {% endtabs %} -## Legend Maximum Size Request -To set the maximum size request for the legend view, override the [GetMaximumSizeCoefficient](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_GetMaximumSizeCoefficient) protected method in the [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) class. The value should be between 0 and 1, representing the maximum size request, not the desired size for the legend items layout. +## Legend maximum size request +To set the maximum size request for the legend view, override the [GetMaximumSizeCoefficient](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_GetMaximumSizeCoefficient) protected method in [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) class. The value should be between 0 and 1, representing the maximum size request, not the desired size for the legend items layout. {% tabs %} {% highlight xaml %} - + . . . @@ -380,7 +377,7 @@ SfFunnelChart chart = new SfFunnelChart() YBindingPath = "YValue", ItemsSource = new AdmissionViewModel().Data, }; -// Other chart configurations + ChartLegend legend = new ChartLegend(); // Initialize the legend. legend.ItemTemplate = chart.Resources["legendTemplate"] as DataTemplate; // Set the item template for the legend. ... @@ -397,7 +394,7 @@ this.Content = chart; **LegendItemCreated** -The [LegendItemCreated](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_LegendItemCreated) event is triggered when the chart legend item is created. The argument contains the [LegendItem](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.LegendItemEventArgs.html#Syncfusion_Maui_Toolkit_LegendItemEventArgs_LegendItem) object. The following properties are present in [LegendItem](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.LegendItemEventArgs.html#Syncfusion_Maui_Toolkit_LegendItemEventArgs_LegendItem): +The [`LegendItemCreated`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_LegendItemCreated) event is triggered when the chart legend item is created. The argument contains the [`LegendItem`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.LegendItemEventArgs.html#Syncfusion_Maui_Toolkit_LegendItemEventArgs_LegendItem) object. The following properties are present in [`LegendItem`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.LegendItemEventArgs.html#Syncfusion_Maui_Toolkit_LegendItemEventArgs_LegendItem). * [`Text`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_Text) – used to get or set the text of the label. * [`TextColor`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_TextColor) – used to get or set the color of the label. @@ -413,10 +410,9 @@ The [LegendItemCreated](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.M * [`DisableBrush`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_DisableBrush) - used to get or set the color of the legend when toggled. * [`Index`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_Index) - used to get index position of the legend. * [`Item`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_Item) - used to get the corresponding data points for the legend item. - ## Limitations * Do not add items explicitly. * When using BindableLayouts, do not bind ItemsSource explicitly. * For better UX, arrange items vertically for left and right dock positions, and horizontally for top and bottom dock positions. * If the layout's measured size is larger than the MaximumHeightRequest, scrolling will be enabled. -* If MaximumHeightRequest is set to 1 and the chart's available size is smaller than the layout's measured size, the series may not have enough space to draw properly. +* If MaximumHeightRequest is set to 1 and the chart's available size is smaller than the layout's measured size, the series may not have enough space to draw properly. \ No newline at end of file diff --git a/maui-toolkit/Funnel-Charts/Overview.md b/maui-toolkit/Funnel-Charts/Overview.md index 7f81ba67..b1d5c525 100644 --- a/maui-toolkit/Funnel-Charts/Overview.md +++ b/maui-toolkit/Funnel-Charts/Overview.md @@ -1,7 +1,7 @@ --- layout: post title: About .NET MAUI Chart Control | Syncfusion -description: Learn about the Syncfusion® .NET MAUI Chart (SfFunnelChart) control with key features and more. +description: Learn here all about introduction of Syncfusion® .NET MAUI Chart(SfFunnelChart) control with key features and more platform: maui-toolkit control: SfFunnelChart documentation: ug diff --git a/maui-toolkit/Funnel-Charts/Segment-Spacing.md b/maui-toolkit/Funnel-Charts/Segment-Spacing.md index 989a915f..a71f19ac 100644 --- a/maui-toolkit/Funnel-Charts/Segment-Spacing.md +++ b/maui-toolkit/Funnel-Charts/Segment-Spacing.md @@ -1,22 +1,22 @@ --- layout: post -title: Segment Spacing in .NET MAUI Chart Control | Syncfusion -description: Learn about segment spacing customization in Syncfusion® .NET MAUI Chart (SfFunnelChart) control and its implementation. +title: Segment spacing in .NET MAUI Chart control Syncfusion +description: Learn here all about segment spacing customization in .NET MAUI Chart (SfFunnelChart), its elements and more. platform: maui-toolkit control: SfFunnelChart documentation: ug --- -# Segment Spacing in .NET MAUI Funnel Chart +# Segment spacing in .NET MAUI Funnel Chart -The gap between each segment in the funnel chart can be set using the [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_GapRatio) property. The default value of GapRatio is `0`, and its value ranges from `0 to 1`. +The gap between each segment in the funnel chart can be set using the [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_GapRatio) property is `0` and its value ranges from `0 to 1`. {% tabs %} {% highlight xml %} - + . . . {% endhighlight %} @@ -24,13 +24,12 @@ The gap between each segment in the funnel chart can be set using the [GapRatio] {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); -// Other chart configurations +. . . chart.GapRatio = 0.2; // Set gap ratio between funnel segments. -// Other chart configurations +. . . this.Content = chart; {% endhighlight %} {% endtabs %} ![Segment spacing in MAUI Chart](Segment_Spacing_images/MAUI_spacing_chart.png) - diff --git a/maui-toolkit/Funnel-Charts/Tooltip.md b/maui-toolkit/Funnel-Charts/Tooltip.md index db420556..f8b6f76a 100644 --- a/maui-toolkit/Funnel-Charts/Tooltip.md +++ b/maui-toolkit/Funnel-Charts/Tooltip.md @@ -1,7 +1,7 @@ --- layout: post -title: Tooltip in .NET MAUI Chart Control | Syncfusion -description: Learn how to enable tooltips and customize them in Syncfusion® .NET MAUI Chart (SfFunnelChart) control. +title: Tooltip in .NET MAUI Chart control | Syncfusion +description: This section explains about how to enable tooltip and its customization in Syncfusion® .NET MAUI Chart (SfFunnelChart) control platform: maui-toolkit control: SfFunnelChart documentation: ug @@ -20,15 +20,16 @@ To define the tooltip in the chart, set the [EnableTooltip](https://help.syncfus {% highlight xaml %} - + . . . + {% endhighlight %} {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); -// Other chart configurations +. . . chart.EnableTooltip = true; // Enable tooltip for the chart. this.Content = chart; {% endhighlight %} @@ -37,7 +38,7 @@ this.Content = chart; ![Tooltip support in MAUI chart](Tooltip_images/MAUI_chart_tooltip.png) -The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) is used to customize the tooltip. For customizing the tooltip, create an instance of [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) and set it to the [TooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_TooltipBehavior) property of [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html). The following properties are used to customize the tooltip: +The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) is used to customize the tooltip. For customizing the tooltip, create an instance [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) and set it to the [TooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_TooltipBehavior) property of [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html). The following properties are used to customize the tooltip: * [Background](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Background) of type `Brush`, indicates background color to the tooltip label. * [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontAttributes) of type `FontAttributes`, indicates the font style of the label. @@ -52,7 +53,7 @@ The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusio {% highlight xml %} - + . . . @@ -63,7 +64,7 @@ The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusio {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); -// Other chart configurations +. . . chart.EnableTooltip = true; // Enable tooltip for the chart. // Customize the tooltip behavior. @@ -71,7 +72,7 @@ chart.TooltipBehavior = new ChartTooltipBehavior() { Duration = 4, // Set the duration for displaying the tooltip. }; -// Other chart configurations +. . . this.Content = chart; {% endhighlight %} @@ -105,7 +106,7 @@ this.Content = chart; - + . . . @@ -114,14 +115,13 @@ this.Content = chart; {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); -// Other chart configurations +. . . chart.EnableTooltip = true; // Enable tooltip for the chart. -chart.TooltipTemplate = grid.Resources["tooltipTemplate"] as DataTemplate; // Set the tooltip template. -// Other chart configurations +chart.TooltipTemplate= grid.Resources["tooltipTemplate"] as DataTemplate; // Set the tooltip template. +. . . this.Content = chart; {% endhighlight %} {% endtabs %} ![Tooltip template in MAUI Chart](Tooltip_images/MAUI_chart_tooltip_customization.png) - From d00a3d3795b776d5861e6d750829fae9bd7689b3 Mon Sep 17 00:00:00 2001 From: NitheeshKumarThangaraj Date: Tue, 3 Jun 2025 16:56:48 +0530 Subject: [PATCH 3/8] Improved the content for the circular chart --- maui-toolkit/Circular-Charts/Appearance.md | 98 ++++++++----------- maui-toolkit/Circular-Charts/DataLabels.md | 66 ++++++------- maui-toolkit/Circular-Charts/DoughnutChart.md | 59 ++++++----- maui-toolkit/Circular-Charts/Explode.md | 17 ++-- maui-toolkit/Circular-Charts/Exporting.md | 27 +++-- .../Circular-Charts/Getting-Started.md | 69 +++++++------ maui-toolkit/Circular-Charts/GroupTo.md | 13 ++- maui-toolkit/Circular-Charts/Legend.md | 46 ++++----- maui-toolkit/Circular-Charts/Overview.md | 4 +- maui-toolkit/Circular-Charts/PieChart.md | 8 +- .../Circular-Charts/RadialBarChart.md | 55 ++++++----- maui-toolkit/Circular-Charts/Selection.md | 10 +- maui-toolkit/Circular-Charts/Tooltip.md | 40 ++++---- 13 files changed, 245 insertions(+), 267 deletions(-) diff --git a/maui-toolkit/Circular-Charts/Appearance.md b/maui-toolkit/Circular-Charts/Appearance.md index 3807948b..584c6679 100644 --- a/maui-toolkit/Circular-Charts/Appearance.md +++ b/maui-toolkit/Circular-Charts/Appearance.md @@ -1,6 +1,6 @@ --- layout: post -title: Appearance in .NET MAUI Chart control Syncfusion +title: Appearance in .NET MAUI Chart control | Syncfusion description: Learn here all about appearance customization in .NET MAUI Chart (SfCircularChart), its elements and more. platform: maui-toolkit control: SfCircularChart @@ -9,30 +9,26 @@ documentation: ug # Appearance in .NET MAUI Circular Chart -The appearance of the [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) can be customized by using the predefined palettes, custom palettes, and gradient which allows enriching the application. +The appearance of the [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) can be customized by using predefined palettes, custom palettes, and gradients, which allows enriching your application. ## Custom PaletteBrushes -The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) provides support to define own brushes for series with preferred order by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) property as shown in the following code example. +The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) provides support to define your own brushes for series with preferred order by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) property as shown in the following code example. {% tabs %} {% highlight xaml %} - - . . . + - - {% endhighlight %} {% highlight c# %} - public class ViewModel { // Collection to hold the data for the chart @@ -56,7 +52,6 @@ public class ViewModel // ... Other methods and properties ... } - {% endhighlight %} {% endtabs %} @@ -70,19 +65,17 @@ The gradient for the circular chart can be set by using the [PaletteBrushes](htt {% tabs %} {% highlight xaml %} - - . . . - + - {% endhighlight %} {% highlight c# %} - public class ViewModel { // Collection to hold data models @@ -102,13 +95,12 @@ public class ViewModel new GradientStop() { Offset = 1, Color = Color.FromRgb(255, 231, 199) }, new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 182, 159) } }; - // Create and configure gradient brush 2 LinearGradientBrush gradientColor2 = new LinearGradientBrush(); gradientColor2.GradientStops = new GradientStopCollection() { - new GradientStop() { Offset = 1, Color = Color.FromRgb(250, 221, 125) }, - new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 204, 45) } + new GradientStop() { Offset = 1, Color = Color.FromRgb(180, 225, 151) }, + new GradientStop() { Offset = 0, Color = Color.FromRgb(111, 183, 214) } }; // Create and configure gradient brush 3 @@ -130,10 +122,10 @@ public class ViewModel // Create and configure gradient brush 5 LinearGradientBrush gradientColor5 = new LinearGradientBrush(); gradientColor5.GradientStops = new GradientStopCollection() - { +{ new GradientStop() { Offset = 1, Color = Color.FromRgb(168, 234, 238) }, new GradientStop() { Offset = 0, Color = Color.FromRgb(123, 176, 249) } - }; +}; // Add all gradient brushes to the CustomBrushes list CustomBrushes.Add(gradientColor1); @@ -144,51 +136,47 @@ public class ViewModel } // ... (other methods or properties) } - {% endhighlight %} {% endtabs %} ![Gradient support in MAUI Chart](Appearance_images/MAUI_pie_chart_gradient.png) -## Plotting Area Customization: +## Plotting Area Customization -[SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html?tabs=tabid-1) allows you to add any view to the chart plot area, which is useful for adding any relevant data, a watermark, or a color gradient to the background of the chart. +[SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) allows you to add any view to the chart plot area, which is useful for adding relevant data, watermarks, or color gradients to the background of the chart. {% tabs %} {% highlight xaml %} - -. . . + - - - + + + - {% endhighlight %} {% highlight c# %} - // Create a new SfCircularChart SfCircularChart chart = new SfCircularChart(); @@ -196,19 +184,17 @@ SfCircularChart chart = new SfCircularChart(); AbsoluteLayout absoluteLayout = new AbsoluteLayout(); // Create a border for the chart plot area -var border = new Border() +var border = new Border() { - Stroke = Colors.Red, + Stroke = new SolidColorBrush(Colors.Red), StrokeThickness = 2 }; - -// Set the border to cover the entire chart area AbsoluteLayout.SetLayoutBounds(border, new Rect(0, 0, 1, 1)); AbsoluteLayout.SetLayoutFlags(border, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.All); absoluteLayout.Children.Add(border); // Create a copyright label -var copyRight = new Label() +var copyRight = new Label() { Text = "Copyright @ 2001 - 2022 Syncfusion Inc", FontSize = 18, @@ -223,25 +209,25 @@ absoluteLayout.Children.Add(copyRight); // Create a watermark label var watermark = new Label() { - Text = "CONFIDENTIAL", + Text = "CONFIDENTIAL", Rotation = 340, FontSize = 80, - FontAttributes = FontAttributes.Bold, + FontAttributes = FontAttributes.Bold | FontAttributes.Italic, TextColor = Colors.Gray, + Margin = new Thickness(10, 0, 0, 0), Opacity = 0.3 }; -// Position the watermark label at the center of the plot area +// Position the watermark in the center AbsoluteLayout.SetLayoutBounds(watermark, new Rect(0.5, 0.5, -1, -1)); AbsoluteLayout.SetLayoutFlags(watermark, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.PositionProportional); absoluteLayout.Children.Add(watermark); -// Set the custom AbsoluteLayout as the chart's background +// Set the AbsoluteLayout as the PlotAreaBackgroundView chart.PlotAreaBackgroundView = absoluteLayout; // Set the chart as the content of the current page/view this.Content = chart; - {% endhighlight %} {% endtabs %} diff --git a/maui-toolkit/Circular-Charts/DataLabels.md b/maui-toolkit/Circular-Charts/DataLabels.md index c33dad20..1835e17a 100644 --- a/maui-toolkit/Circular-Charts/DataLabels.md +++ b/maui-toolkit/Circular-Charts/DataLabels.md @@ -1,7 +1,7 @@ --- layout: post -title: Data label in .NET MAUI Chart control | .NET MAUI | Syncfusion -description: This section explains about how to configure the data labels and its features in .NET MAUI Chart (SfCircularChart). +title: Data labels in .NET MAUI Chart control | .NET MAUI | Syncfusion +description: This section explains how to configure the data labels and their features in .NET MAUI Chart (SfCircularChart). platform: maui-toolkit control: SfCircularChart documentation: ug @@ -9,28 +9,26 @@ documentation: ug # Data Labels in .NET MAUI Chart -Data labels are used to display values related to a chart segment. Values from data point(x, y) or other custom properties from a data source can be displayed. - -Each data label can be represented by the following: +Data labels are used to display values related to a chart segment. Values from data points (x, y) or other custom properties from a data source can be displayed. +Each data label consists of the following components: * Label - displays the segment label content at the (X, Y) point. -* Connector line - used to connect the (X, Y) point and the label element. +* Connector line - connects the (X, Y) point and the label element. ## Enable Data Labels -[ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_ShowDataLabels) property of series is used to enable the data labels. +The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_ShowDataLabels) property of series is used to enable the data labels. {% tabs %} {% highlight xaml %} - . . . + - . . . {% endhighlight %} @@ -38,11 +36,11 @@ Each data label can be represented by the following: {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations PieSeries series = new PieSeries(); // Enable data labels for this series series.ShowDataLabels = true; -. . . +// Other series configurations chart.Series.Add(series); this.Content = chart; @@ -51,7 +49,7 @@ this.Content = chart; {% endtabs %} -Data labels can be customized by using the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_DataLabelSettings) property of chart series. For customizing, need to create an instance of [CircularDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html) and set to the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_DataLabelSettings) property. Following properties are used to customize the data labels which are available in [CircularDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html). +Data labels can be customized using the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_DataLabelSettings) property of chart series. For customization, create an instance of [CircularDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html) and set it to the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_DataLabelSettings) property. The following properties are available in [CircularDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html) for customization: * [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) - Gets or sets the data label position, either inside or outside of the chart segment. * [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) - Gets or sets the option to smartly arrange the data labels to avoid intersection when labels overlap. @@ -65,14 +63,13 @@ N> Data label support is applicable only for [PieSeries](https://help.syncfusion ## Data Label Position -The [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) property is used to place the data labels either [Inside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Inside) or [Outside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Outside) of the chart segment. By default the data labels are placed inside the series. +The [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) property is used to place the data labels either [Inside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Inside) or [Outside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Outside) of the chart segment. By default, the data labels are placed inside the series. {% tabs %} {% highlight xaml %} - - {% endhighlight %} @@ -90,7 +86,7 @@ The [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui. {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other configurations PieSeries series = new PieSeries(); series.ItemsSource = new SalesViewModel().Data; series.XBindingPath = "Product"; @@ -111,23 +107,23 @@ this.Content = chart; {% endtabs %} -## Smart labels +## Smart Labels -The [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) property is used to arrange the data labels smartly to avoid intersection when labels overlap. The [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html) enum contains the following values. +The [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) property is used to arrange the data labels smartly to avoid intersection when labels overlap. The [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html) enum contains the following values: * [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift) - Gets or sets the option to smartly arrange the overlapped data labels. * [Hide](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Hide) - Gets or sets the option to hide the intersected data labels. * [None](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_None) - Gets or sets the option to keep the intersected data labels visible. -By default, value for [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) property is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift). +By default, the value for the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) property is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift). If the [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) is [Inside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Inside) and the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift), then the overlapped labels will shift to outside the slices and arrange smartly. If the [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) is [Inside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Inside) and the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [Hide](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Hide), then the overlapped labels will be hidden. If the [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) is [Outside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Outside) and the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift), then the overlapped labels arrange smartly. If the [LabelPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_LabelPosition) is [Outside](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelPosition.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelPosition_Outside) and the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [Hide](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Hide), then the overlapped labels will be hidden. -If the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [None](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_None), then the overlapped labels will be visible irrespective of LabelPosition. +If the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [None](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_None), then the overlapped labels will be visible irrespective of the LabelPosition. -When the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift), and if the data label goes out of the chart area, then the labels got trimmed. +When the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_CircularDataLabelSettings_SmartLabelAlignment) is [Shift](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SmartLabelAlignment.html#Syncfusion_Maui_Toolkit_Charts_SmartLabelAlignment_Shift), and if the data label goes out of the chart area, then the labels will be trimmed. {% tabs %} @@ -136,7 +132,7 @@ When the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncf - ... + @@ -157,7 +153,7 @@ When the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncf {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other configurations PieSeries series = new PieSeries(); series.ItemsSource = new ViewModel().Data; series.XBindingPath = "XValue"; @@ -166,7 +162,7 @@ series.ShowDataLabels = true; DataTemplate labelTemplate = new DataTemplate(() => { - // ... (Custom label template definition goes here) + // Custom label template definition }); series.LabelTemplate = labelTemplate; @@ -189,14 +185,14 @@ this.Content = chart; ## Applying Series Brush -[UseSeriesPalette](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) property is used to set the interior of the series to the data label background. +The [UseSeriesPalette](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) property is used to set the interior of the series to the data label background. {% tabs %} {% highlight xaml %} - . . . + @@ -209,7 +205,7 @@ this.Content = chart; {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other configurations PieSeries series = new PieSeries(); series.ShowDataLabels = true; @@ -232,18 +228,17 @@ this.Content = chart; ## Formatting Label Context -The content of the label can be customized using the [LabelContext](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_LabelContext) property. Following are the two options that are supported now, - -* [Percentage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelContext.html#Syncfusion_Maui_Toolkit_Charts_LabelContext_Percentage) - This will show the percentage value of corresponding data point Y value. +The content of the label can be customized using the [LabelContext](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_LabelContext) property. Currently, the following two options are supported: -* [YValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelContext.html#Syncfusion_Maui_Toolkit_Charts_LabelContext_YValue) - This will show the corresponding Y value. +* [Percentage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelContext.html#Syncfusion_Maui_Toolkit_Charts_LabelContext_Percentage) - Shows the percentage value of the corresponding data point Y value. +* [YValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelContext.html#Syncfusion_Maui_Toolkit_Charts_LabelContext_YValue) - Shows the corresponding Y value. {% tabs %} {% highlight xaml %} - . . . + - @@ -303,7 +296,6 @@ The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Mau ShowDataLabels="True" LabelTemplate="{StaticResource labelTemplate}"> - {% endhighlight %} @@ -443,4 +435,4 @@ this.Content = chart; {% endtabs %} -![Connector line style in MAUI Chart](DataLabel_images/maui_chart_connector_line_style.png) \ No newline at end of file +![Connector line style in MAUI Chart](DataLabel_images/maui_chart_connector_line_style.png) diff --git a/maui-toolkit/Circular-Charts/DoughnutChart.md b/maui-toolkit/Circular-Charts/DoughnutChart.md index 57ca09e4..ddbfd146 100644 --- a/maui-toolkit/Circular-Charts/DoughnutChart.md +++ b/maui-toolkit/Circular-Charts/DoughnutChart.md @@ -1,7 +1,7 @@ --- layout: post title: Doughnut chart in .NET MAUI Chart control | Syncfusion -description: Learn here all about doughnut chart and its features in Syncfusion® .NET MAUI Chart Chart (SfCircularChart) control. +description: Learn here all about doughnut chart and its features in Syncfusion® .NET MAUI Chart (SfCircularChart) control. platform: maui-toolkit control: SfCircularChart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Doughnut Chart in .NET MAUI Chart -[DoughnutSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html) is similar to [PieSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html). It is used to show the relationship between parts of data and whole data. To render a [DoughnutSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html) in circular chart, create an instance of the [DoughnutSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html#Syncfusion_Maui_Toolkit_Charts_SfCircularChart_Series) collection property of [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html). +The [DoughnutSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html) is similar to [PieSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html). It is used to show the relationship between parts of data and the whole data. To render a [DoughnutSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html) in circular chart, create an instance of the [DoughnutSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html#Syncfusion_Maui_Toolkit_Charts_SfCircularChart_Series) collection property of [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html). N> The circular chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html#Syncfusion_Maui_Toolkit_Charts_SfCircularChart_Series) as its default content. @@ -30,13 +30,15 @@ N> The circular chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/S // Create a new instance of SfCircularChart SfCircularChart chart = new SfCircularChart(); -DoughnutSeries series = new DoughnutSeries(); // Create a new instance of DoughnutSeries +// Create a new instance of DoughnutSeries +DoughnutSeries series = new DoughnutSeries(); series.ItemsSource = (new SalesViewModel()).Data; -series.XBindingPath = "Product"; -series.YBindingPath = "SalesRate"; +series.XBindingPath = "Product"; +series.YBindingPath = "SalesRate"; -chart.Series.Add(series); // Add the series to the chart's Series collection -this.Content = chart; +// Add the series to the chart's Series collection +chart.Series.Add(series); +this.Content = chart; {% endhighlight %} @@ -46,19 +48,18 @@ this.Content = chart; ## Inner Radius -The [InnerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_InnerRadius) property of doughnut series is used to define the inner circle. - +The [InnerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_InnerRadius) property of doughnut series is used to define the inner circle size. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} @@ -69,8 +70,8 @@ DoughnutSeries series = new DoughnutSeries(); series.ItemsSource = (new SalesViewModel()).Data; series.XBindingPath = "Product"; series.YBindingPath = "SalesRate"; -series.InnerRadius = 0.7; // Set the inner radius of the doughnut chart (70% of the available space) - +// Set the inner radius of the doughnut chart (70% of the available space) +series.InnerRadius = 0.7; chart.Series.Add(series); this.Content = chart; @@ -83,30 +84,31 @@ this.Content = chart; ## Semi Doughnut By using the [StartAngle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_StartAngle) and [EndAngle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_EndAngle) properties, you can draw doughnut series in different shapes such as semi-doughnut or quarter doughnut series. - {% tabs %} {% highlight xaml %} - + - + {% endhighlight %} {% highlight c# %} -SfCircularChart chart = new SfCircularChart(); +SfCircularChart chart = new SfCircularChart(); DoughnutSeries series = new DoughnutSeries(); series.ItemsSource = (new SalesViewModel()).Data; series.XBindingPath = "Product"; series.YBindingPath = "SalesRate"; -series.StartAngle = 180; // Set the starting angle of the doughnut chart (in degrees) -series.EndAngle = 360; // Set the ending angle of the doughnut chart (in degrees) +// Set the starting angle of the doughnut chart (in degrees) +series.StartAngle = 180; +// Set the ending angle of the doughnut chart (in degrees) +series.EndAngle = 360; chart.Series.Add(series); this.Content = chart; @@ -119,18 +121,18 @@ this.Content = chart; ## Center View -The view placed in the center of the doughnut chart is useful for sharing additional information about the doughnut chart. Any view can be added to the center of the doughnut chart using the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterView) property of [DoughnutSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html). The binding context of the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterView) will be the respective doughnut series. +The view placed in the center of the doughnut chart is useful for sharing additional information about the chart data. Any view can be added to the center of the doughnut chart using the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterView) property of [DoughnutSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html). The binding context of the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterView) will be the respective doughnut series. ### Center Hole Size -The [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterHoleSize) property of [DoughnutSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html) is used to get the diameter value of the center hole. Using the [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterHoleSize), we can protect the view in the doughnut center from overlapping with the series. +The [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterHoleSize) property of [DoughnutSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html) is used to get the diameter value of the center hole. Using the [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DoughnutSeries.html#Syncfusion_Maui_Toolkit_Charts_DoughnutSeries_CenterHoleSize), you can ensure that the view in the doughnut center does not overlap with the series. {% tabs %} {% highlight xaml %} - - + + @@ -149,7 +151,7 @@ The [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui {% highlight c# %} -SfCircularChart chart = new SfCircularChart(); +SfCircularChart chart = new SfCircularChart(); // Create a new DoughnutSeries DoughnutSeries series = new DoughnutSeries(); @@ -157,7 +159,8 @@ series.ItemsSource = (new ViewModel()).Data; series.XBindingPath = "Name"; series.YBindingPath = "Value"; -Border border = new Border(); // Create a border to contain the center view content +// Create a border to contain the center view content +Border border = new Border(); Label name = new Label(); name.Text = "Total :"; @@ -170,7 +173,8 @@ layout.Children.Add(name); layout.Children.Add(value); border.Content = layout; -series.CenterView = border; // Set the border (containing the labels) as the center view of the doughnut series +// Set the border (containing the labels) as the center view of the doughnut series +series.CenterView = border; chart.Series.Add(series); this.Content = chart; @@ -180,3 +184,4 @@ this.Content = chart; {% endtabs %} ![Center View in MAUI doughnut Chart](Chart-Types_images/maui_center_View.png) + diff --git a/maui-toolkit/Circular-Charts/Explode.md b/maui-toolkit/Circular-Charts/Explode.md index 1f9d398f..91d474c4 100644 --- a/maui-toolkit/Circular-Charts/Explode.md +++ b/maui-toolkit/Circular-Charts/Explode.md @@ -7,11 +7,11 @@ control: SfCircularChart documentation: ug --- -# Explode segments in .NET MAUI SfCircularChart +# Explode Segments in .NET MAUI SfCircularChart -## Exploding a segment +## Exploding a Segment -Exploding a segment is used to pull attention to a specific area of the circular chart. The following properties are used to explode the segments in the circular chart. +Exploding a segment is used to draw attention to a specific area of the circular chart. The following properties are used to explode the segments in the circular chart: * [ExplodeIndex](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_ExplodeIndex) - Used to explode any specific segment. * [ExplodeRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_ExplodeRadius) - Used to define the explode distance. @@ -22,7 +22,7 @@ Exploding a segment is used to pull attention to a specific area of the circular {% highlight xaml %} - . . . + - . . . + The chart view can be exported as an image only when the chart view is added to the visual tree. @@ -29,7 +29,6 @@ SfCircularChart chart = new SfCircularChart(); // Set the chart as the content of the current page or container this.Content = chart; -. . . // Dynamically save the chart as an image file named "ChartSample.jpeg" chart.SaveAsImage("ChartSample.jpeg"); @@ -37,23 +36,22 @@ chart.SaveAsImage("ChartSample.jpeg"); {% endtabs %} -T> We can change the image formats in above code by changing its extension as .jpg, .png. +T> You can change the image format by changing the file extension (e.g., .jpg, .png) in the filename. -The exported image will be saved in the different location across the platforms. +The exported image will be saved in different locations across platforms: -**Windows Phone, Android and MAC** – The image will be saved inside the 'Pictures' directory of the file system. - -**iOS** – The image will be saved inside the 'Photos/Album' directory of the file system. +* **Windows Phone, Android, and Mac** – The image will be saved inside the 'Pictures' directory of the file system. +* **iOS** – The image will be saved inside the 'Photos/Album' directory of the file system. To save the image on Android and Windows Phone devices, you must enable file writing permissions on the device storage. -To save the image in the photo album on iOS devices, you must enable permission to access the device storage in the "Info" file. +To save the image in the photo album on iOS devices, you must enable permission to access the device storage in the "Info.plist" file. -Add the following code snippet to the "Info" file: +Add the following code snippet to the "Info.plist" file: {% tabs %} -{% highlight xaml %} +{% highlight xml %} ... @@ -68,11 +66,11 @@ Add the following code snippet to the "Info" file: {% endtabs %} -## Get the stream of Chart +## Get the Stream of Chart -The [GetStreamAsync](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_GetStreamAsync_Syncfusion_Maui_Toolkit_ImageFileFormat_) method of [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) is used to asynchronously get the chart view as a stream in the desired ImageFileFormat. The output stream can be passed as an input to other components that accept streams, such as PDF, Excel, and Word. The supported image file formats are **JPEG and PNG**. +The [GetStreamAsync](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_GetStreamAsync_Syncfusion_Maui_Toolkit_ImageFileFormat_) method of [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) is used to asynchronously get the chart view as a stream in the desired ImageFileFormat. The output stream can be passed as an input to other components that accept streams, such as PDF, Excel, and Word documents. The supported image file formats are **JPEG and PNG**. -N> The charts stream can only be rendered when the chart view is added to the visual tree. +N> The chart's stream can only be generated when the chart view is added to the visual tree. The following code snippet demonstrates the usage of this method: @@ -95,3 +93,4 @@ await chart.GetStreamAsync(ImageFileFormat.Jpeg); {% endhighlight %} {% endtabs %} + diff --git a/maui-toolkit/Circular-Charts/Getting-Started.md b/maui-toolkit/Circular-Charts/Getting-Started.md index e111b420..8cae61b8 100644 --- a/maui-toolkit/Circular-Charts/Getting-Started.md +++ b/maui-toolkit/Circular-Charts/Getting-Started.md @@ -18,18 +18,18 @@ This section explains how to populate the Circular Chart with data, including ad Before proceeding, ensure that the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.8 or later). ## Step 1: Create a new .NET MAUI project 1. Go to **File > New > Project** and choose the **.NET MAUI App** template. -2. Name the project and choose a location. Then, click **Next.** -3. Select the .NET framework version and click **Create.** +2. Name the project and choose a location. Then, click **Next**. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI Toolkit Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/) and install the latest version. 3. Ensure the necessary dependencies are installed correctly, and the project is restored. @@ -88,8 +88,7 @@ In the **MauiProgram.cs** file, register the handler for Syncfusion® using Syncfusion.Maui.Toolkit.Charts; -. . . - +// Other using statements public partial class MainPage : ContentPage { public MainPage() @@ -113,16 +112,16 @@ public partial class MainPage : ContentPage Before proceeding, ensure that the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 2. Set up a .NET MAUI environment with Visual Studio Code. -3. Ensure that the .NET MAUI extension is installed and configured as described [here.](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code) +3. Ensure that the .NET MAUI extension is installed and configured as described [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). ## Step 1: Create a new .NET MAUI project 1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. 2. Choose the **.NET MAUI App** template. -3. Select the project location, type the project name and press **Enter.** -4. Then choose **Create project.** +3. Select the project location, type the project name and press **Enter**. +4. Then choose **Create project**. ## Step 2: Install the Syncfusion® MAUI Toolkit Package @@ -186,8 +185,7 @@ In the **MauiProgram.cs** file, register the handler for Syncfusion® using Syncfusion.Maui.Toolkit.Charts; -. . . - +// Other using statements public partial class MainPage : ContentPage { public MainPage() @@ -212,20 +210,20 @@ public partial class MainPage : ContentPage Before proceeding, ensure the following are set up: 1. Ensure you have the latest version of JetBrains Rider. -2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. -3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) +2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). ## Step 1: Create a new .NET MAUI Project -1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +1. Go to **File > New Solution**, Select .NET (C#) and choose the .NET MAUI App template. 2. Enter the Project Name, Solution Name, and Location. 3. Select the .NET framework version and click Create. ## Step 2: Install the Syncfusion® MAUI Toolkit NuGet Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/) and install the latest version. -3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, Open the Terminal in Rider and manually run: `dotnet restore` +3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, open the Terminal in Rider and manually run: `dotnet restore` ## Step 3: Register the handler @@ -282,8 +280,7 @@ In the **MauiProgram.cs** file, register the handler for Syncfusion® using Syncfusion.Maui.Toolkit.Charts; -. . . - +// Other using statements public partial class MainPage : ContentPage { public MainPage() @@ -334,11 +331,11 @@ public class SalesViewModel { Data = new List() { - new SalesModel(){Product = "iPad", SalesRate = 25}, - new SalesModel(){Product = "iPhone", SalesRate = 35}, - new SalesModel(){Product = "MacBook", SalesRate = 15}, - new SalesModel(){Product = "Mac", SalesRate = 5}, - new SalesModel(){Product = "Others", SalesRate = 10}, + new SalesModel() { Product = "iPad", SalesRate = 25 }, + new SalesModel() { Product = "iPhone", SalesRate = 35 }, + new SalesModel() { Product = "MacBook", SalesRate = 15 }, + new SalesModel() { Product = "Mac", SalesRate = 5 }, + new SalesModel() { Product = "Others", SalesRate = 10 }, }; } } @@ -372,8 +369,7 @@ N> If you prefer to set the `BindingContext` in XAML, make sure to add the appro using Syncfusion.Maui.Toolkit.Charts; -. . . - +// Other using statements public partial class MainPage : ContentPage { public MainPage() @@ -403,7 +399,7 @@ N> To plot the series, the [XBindingPath](https://help.syncfusion.com/cr/maui-to {% highlight xaml %} - . . . + @@ -432,7 +428,7 @@ this.Content = chart; ### Add a title -The title of the chart acts as the title to provide quick information to the user about the data being plotted in the chart. You can set title using the [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Title) property of circular chart as follows. +The title of the chart provides quick information to the user about the data being plotted in the chart. You can set title using the [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Title) property of circular chart as follows. {% tabs %} @@ -442,7 +438,7 @@ The title of the chart acts as the title to provide quick information to the use - . . . + {% endhighlight %} @@ -456,7 +452,7 @@ chart.Title = new Label() { Text = "PRODUCT SALES", }; -. . . +// Other chart configurations this.Content = chart; {% endhighlight %} @@ -471,7 +467,7 @@ The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui {% highlight xaml %} - . . . + @@ -480,7 +476,7 @@ The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui {% highlight C# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations PieSeries series = new PieSeries(); series.ShowDataLabels = true; // Enable data labels for the series chart.Series.Add(series); @@ -498,7 +494,7 @@ The legend provides information about the data point displayed in the circular c {% highlight xaml %} - . . . + @@ -509,7 +505,7 @@ The legend provides information about the data point displayed in the circular c {% highlight C# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations // Initialize and assign a new ChartLegend to the chart's Legend property chart.Legend = new ChartLegend(); this.Content = chart; @@ -519,14 +515,14 @@ this.Content = chart; ### Enable Tooltip -Tooltips are used to show information about the segment, when mouse over on it. Enable tooltip by setting series [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_EnableTooltip) property as true. +Tooltips are used to show information about the segment when mouse over on it. Enable tooltip by setting series [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_EnableTooltip) property as true. {% tabs %} {% highlight xaml %} - . . . + @@ -626,3 +622,4 @@ public partial class MainPage : ContentPage ![Pie chart in .NET MAUI Chart](Getting-Started_Images/MAUI_pie_chart.png) You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/maui-toolkit-samples/tree/master/CircularChart/GettingStarted). + diff --git a/maui-toolkit/Circular-Charts/GroupTo.md b/maui-toolkit/Circular-Charts/GroupTo.md index 98859040..0be88cdd 100644 --- a/maui-toolkit/Circular-Charts/GroupTo.md +++ b/maui-toolkit/Circular-Charts/GroupTo.md @@ -9,22 +9,21 @@ documentation: ug # Grouping Data Points in .NET MAUI SfCircularChart -The small segments in the circular chart can be grouped into an `Others` category using the [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) and [GroupMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupMode) properties of the [PieSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html). The [GroupMode]() property is used to specify the grouping type based on slice angle, actual data point value, or percentage. The [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) property is used to set the limit to group data points into a single slice. The grouped segment is labeled as `Others` in the chart legend. +The small segments in the circular chart can be grouped into an `Others` category using the [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) and [GroupMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupMode) properties of the [PieSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html). The [GroupMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupMode) property is used to specify the grouping type based on slice angle, actual data point value, or percentage. The [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) property is used to set the limit to group data points into a single slice. The grouped segment is labeled as `Others` in the chart legend. -N> [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) only support for pie and doughnut chart. +N> The [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) feature is only supported for pie and doughnut chart types. {% tabs %} {% highlight xaml %} - + - {% endhighlight %} @@ -32,14 +31,14 @@ N> [GroupTo](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations PieSeries series = new PieSeries() { ItemsSource = new ViewModel().Data, XBindingPath = "Product", YBindingPath = "SalesRate", - GroupMode = Value, // Set the mode for grouping smaller slices into a single slice. - GroupTo = 15 // Define a threshold value for the group mode. + GroupMode = ChartGroupMode.Value, // Set the mode for grouping smaller slices into a single slice + GroupTo = 15 // Define a threshold value for the group mode }; chart.Series.Add(series); diff --git a/maui-toolkit/Circular-Charts/Legend.md b/maui-toolkit/Circular-Charts/Legend.md index 365a6fcd..a1443177 100644 --- a/maui-toolkit/Circular-Charts/Legend.md +++ b/maui-toolkit/Circular-Charts/Legend.md @@ -11,7 +11,7 @@ keywords: .net maui circular chart, chart legend, legend-wrap, legend view, lege # Legend in .NET MAUI Chart (SfCircularChart) The [Legend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Legend) provides a list of data points, helping to identify the corresponding data points in the chart. Here's a detailed guide on how to define and customize the legend in the circular chart. -## Defining the legend +## Defining the Legend To define the legend in the chart, initialize the [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) class and assign it to the [Legend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_Legend) property. {% tabs %} @@ -24,7 +24,6 @@ To define the legend in the chart, initialize the [ChartLegend](https://help.syn - {% endhighlight %} {% highlight c# %} @@ -32,13 +31,13 @@ To define the legend in the chart, initialize the [ChartLegend](https://help.syn SfCircularChart chart = new SfCircularChart(); // Create and assign a new ChartLegend to the chart's Legend property chart.Legend = new ChartLegend(); -. . . +// Other configurations this.Content = chart; {% endhighlight %} {% endtabs %} -## Legend visibility +## Legend Visibility The visibility of the chart legend can be controlled using the [IsVisible](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_IsVisible) property. By default, the IsVisible property is set to `true`. {% tabs %} @@ -61,14 +60,14 @@ chart.Legend = new ChartLegend() { IsVisible = true // Set the visibility of the legend to true }; -. . . +// Other configurations this.Content = chart; {% endhighlight %} {% endtabs %} -## Legend item visibility +## Legend Item Visibility The visibility of individual legend items for specific series can be controlled using the [IsVisibleOnLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_IsVisibleOnLegend) property of the series. The default value for IsVisibleOnLegend is `true`. @@ -108,7 +107,7 @@ this.Content = chart; {% endtabs %} -## Customizing labels +## Customizing Labels The appearance of the legend label can be customized using the [`LabelStyle`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_LabelStyle) property. @@ -159,8 +158,8 @@ this.Content = chart; ![Legend labels customization support in Maui Chart](Legend-images/legend_label_style.png) -## Legend icon -To specify the legend icon based on the associated series type, use the [LegendIcon](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_LegendIcon) property and change its type using the [ChartLegendIconType](https://help.syncfusion.c om/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendIconType.html) enum values. The default value of the LegendIcon property is `Circle`. +## Legend Icon +To specify the legend icon based on the associated series type, use the [LegendIcon](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_LegendIcon) property and change its type using the [ChartLegendIconType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendIconType.html) enum values. The default value of the LegendIcon property is `Circle`. {% tabs %} @@ -174,7 +173,7 @@ To specify the legend icon based on the associated series type, use the [LegendI + LegendIcon="Diamond"/> {% endhighlight %} @@ -229,7 +228,7 @@ this.Content = chart; {% endtabs %} -## Toggle the series visibility +## Toggle the Series Visibility The visibility of circular series data points can be controlled by tapping the legend item using the [ToggleSeriesVisibility](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ToggleSeriesVisibility) property. The default value of ToggleSeriesVisibility is `false`. {% tabs %} @@ -259,19 +258,18 @@ this.Content = chart; {% endtabs %} -## Legend maximum size request -To set the maximum size request for the legend view, override the [GetMaximumSizeCoefficient](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_GetMaximumSizeCoefficient) protected method in [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) class. The value should be between 0 and 1, representing the maximum size request, not the desired size for the legend items layout. +## Legend Maximum Size Request +To set the maximum size request for the legend view, override the [GetMaximumSizeCoefficient](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_GetMaximumSizeCoefficient) protected method in the [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) class. The value should be between 0 and 1, representing the maximum size request, not the desired size for the legend items layout. {% tabs %} {% highlight xaml %} - - . . . + + - . . . {% endhighlight %} @@ -295,12 +293,11 @@ this.Content = chart; {% endtabs %} -## Items layout +## Items Layout The [ItemsLayout](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ItemsLayout) property is used to customize the arrangement and position of each legend item. The default value is `null`. This property accepts any layout type. -For more details about the layout alignment refer to this [article](https://support.syncfusion.com/kb/article/16201/how-to-align-the-chart-legend-items-in-net-maui-circular-chart). - +For more details about layout alignment, refer to this [article](https://support.syncfusion.com/kb/article/16201/how-to-align-the-chart-legend-items-in-net-maui-circular-chart). {% tabs %} @@ -323,7 +320,7 @@ For more details about the layout alignment refer to this [article](https://supp {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations ChartLegend legend = new ChartLegend(); legend.ItemsLayout = new FlexLayout() { @@ -338,8 +335,8 @@ this.Content = chart; {% endtabs %} -## Item template -The [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) supports customizing the appearance of legend items using the [ItemTemplate](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ItemTemplate) property. The default value of ItemsTemplate is `null`. +## Item Template +The [ChartLegend](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html) supports customizing the appearance of legend items using the [ItemTemplate](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegend.html#Syncfusion_Maui_Toolkit_Charts_ChartLegend_ItemTemplate) property. The default value of ItemTemplate is `null`. N> The BindingContext of the template is the corresponding underlying legend item provided in the ChartLegendItem class. @@ -364,19 +361,18 @@ N> The BindingContext of the template is the corresponding underlying legend ite - . . . + {% endhighlight %} - {% highlight c# %} SfCircularChart chart = new SfCircularChart(); ChartLegend legend = new ChartLegend(); // Assign a custom item template to the legend using a `DataTemplate` resource from the chart's resources. legend.ItemTemplate = chart.Resources["legendTemplate"] as DataTemplate; -... +// Other chart configurations chart.Legend = legend; this.Content = chart; diff --git a/maui-toolkit/Circular-Charts/Overview.md b/maui-toolkit/Circular-Charts/Overview.md index 0306e053..9f8e70d3 100644 --- a/maui-toolkit/Circular-Charts/Overview.md +++ b/maui-toolkit/Circular-Charts/Overview.md @@ -1,7 +1,7 @@ --- layout: post title: About .NET MAUI Chart Control | Syncfusion -description: Learn here all about introduction of Syncfusion® .NET MAUI Chart(SfCircularChart) control with key features and more. +description: Learn here all about introduction of Syncfusion® .NET MAUI Chart (SfCircularChart) control with key features and more. platform: maui-toolkit control: SfCircularChart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # .NET MAUI Circular Chart Overview -The Syncfusion® Toolkit for .NET MAUI Circular Charts (`SfCircularChart`) provides a visually stunning and feature-rich way to display data in high-quality .NET MAUI applications. These charts allow for elegant visualization of data in various circular formats, making them perfect for displaying proportions and comparisons. +The Syncfusion® Toolkit for .NET MAUI Circular Charts ([SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html)) provides a visually stunning and feature-rich way to display data in high-quality .NET MAUI applications. These charts allow for elegant visualization of data in various circular formats, making them perfect for displaying proportions and comparisons. ## Key Features diff --git a/maui-toolkit/Circular-Charts/PieChart.md b/maui-toolkit/Circular-Charts/PieChart.md index 7b8d3e4c..1ba9a3a1 100644 --- a/maui-toolkit/Circular-Charts/PieChart.md +++ b/maui-toolkit/Circular-Charts/PieChart.md @@ -35,7 +35,7 @@ series.ItemsSource = (new SalesViewModel()).Data; series.XBindingPath = "Product"; series.YBindingPath = "SalesRate"; -// Add the configured series to the chart's series collection. +// Add the configured series to the chart's series collection chart.Series.Add(series); this.Content = chart; @@ -70,7 +70,7 @@ PieSeries series = new PieSeries(); series.ItemsSource = (new SalesViewModel()).Data; series.XBindingPath = "Product"; series.YBindingPath = "SalesRate"; -series.Radius = 0.9; // Set the radius of the pie chart +series.Radius = 0.9; // Set the radius of the pie chart (90% of available space) chart.Series.Add(series); this.Content = chart; @@ -107,8 +107,8 @@ PieSeries series = new PieSeries(); series.ItemsSource = (new SalesViewModel()).Data; series.XBindingPath = "Product"; series.YBindingPath = "SalesRate"; -series.StartAngle = 180; // Set the starting angle for the pie slices -series.EndAngle = 360; // Set the ending angle for the pie slices +series.StartAngle = 180; // Set the starting angle for the pie slices (in degrees) +series.EndAngle = 360; // Set the ending angle for the pie slices (in degrees) chart.Series.Add(series); this.Content = chart; diff --git a/maui-toolkit/Circular-Charts/RadialBarChart.md b/maui-toolkit/Circular-Charts/RadialBarChart.md index 01afebae..a2a74339 100644 --- a/maui-toolkit/Circular-Charts/RadialBarChart.md +++ b/maui-toolkit/Circular-Charts/RadialBarChart.md @@ -1,7 +1,7 @@ --- layout: post title: Radial Bar chart in .NET MAUI Chart control | Syncfusion -description: Learn here all about radial bar chart and its features in Syncfusion® .NET MAUI Chart Chart (SfCircularChart) control. +description: Learn here all about radial bar chart and its features in Syncfusion® .NET MAUI Chart (SfCircularChart) control. platform: maui-toolkit control: SfCircularChart documentation: ug @@ -15,17 +15,17 @@ N> The circular chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/S The following properties can be used to customize the appearance of the radial bar segment: - * [Opacity](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_Opacity) - To control the transparency of the chart segments. + * [Opacity](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_Opacity) - Controls the transparency of the chart segments. - * [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_Stroke) - To customize the outer layer of the chart segments. + * [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_Stroke) - Customizes the outer layer of the chart segments. - * [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_StrokeWidth) - To customize the width of the stroke in chart segments. + * [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_StrokeWidth) - Customizes the width of the stroke in chart segments. - * [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_GapRatio) - To customize the spacing between each chart segments. + * [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_GapRatio) - Customizes the spacing between each chart segment. - * [MaximumValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_MaximumValue) - To represent the span of the segment-filled area in the radial bar track. The default value of this property is `double.NaN`. + * [MaximumValue](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_MaximumValue) - Represents the span of the segment-filled area in the radial bar track. The default value is `double.NaN`. - * [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) - To customize the appearance of the series. + * [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) - Customizes the appearance of the series. {% tabs %} @@ -49,7 +49,7 @@ series.ItemsSource = (new SalesViewModel()).Data; series.XBindingPath = "Product"; series.YBindingPath = "SalesRate"; -// Add the configured series to the SfCircularChart's series collection. +// Add the configured series to the SfCircularChart's series collection chart.Series.Add(series); this.Content = chart; @@ -59,7 +59,7 @@ this.Content = chart; ![.NET MAUI Radial bar chart](Chart-Types_images/maui_radialbar_chart.png) -## Changing the radial bar size +## Changing the Radial Bar Size You can use the [Radius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CircularSeries.html#Syncfusion_Maui_Toolkit_Charts_CircularSeries_Radius) property to change the radial bar chart size. The default value of the radius is `0.8`. @@ -84,7 +84,7 @@ RadialBarSeries series = new RadialBarSeries(); series.ItemsSource = (new SalesViewModel()).Data; series.XBindingPath = "Product"; series.YBindingPath = "SalesRate"; -series.Radius = 0.5; // Set the radius of the radial bars +series.Radius = 0.5; // Set the radius of the radial bars (50% of available space) chart.Series.Add(series); this.Content = chart; @@ -95,7 +95,7 @@ this.Content = chart; ![.NET MAUI Radial bar chart radius customization](Chart-Types_images/maui_radius.png) -## Changing the radial bar inner radius +## Changing the Radial Bar Inner Radius The [InnerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_InnerRadius) property of radial bar series is used to define the inner circle. The default value of this property is `0.4`. @@ -107,7 +107,7 @@ The [InnerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.To + InnerRadius="0.1"/> {% endhighlight %} @@ -120,7 +120,7 @@ RadialBarSeries series = new RadialBarSeries(); series.ItemsSource = (new SalesViewModel()).Data; series.XBindingPath = "Product"; series.YBindingPath = "SalesRate"; -series.InnerRadius = 0.1; // Set the inner radius of the radial bar chart, which determine the center emptiness of the chart +series.InnerRadius = 0.1; // Set the inner radius of the radial bar chart, which determines the center emptiness of the chart chart.Series.Add(series); this.Content = chart; @@ -131,11 +131,11 @@ this.Content = chart; ![.NET MAUI Radial bar chart inner radius customization](Chart-Types_images/maui_inner_radius.png) -## CapStyle customization +## CapStyle Customization -The [CapStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CapStyle) property of the radial bar series is used to specify the shape of the start and end points of the circular segment. The default value of this property is `Both.Flat`. +The [CapStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CapStyle) property of the radial bar series is used to specify the shape of the start and end points of the circular segment. The default value of this property is `BothFlat`. -The following types are available for [CapStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CapStyle) property. +The following types are available for [CapStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CapStyle) property: * [BothFlat](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CapStyle.html#Syncfusion_Maui_Toolkit_Charts_CapStyle_BothFlat) - Start and end positions of the segment should be updated with a flat shape. @@ -157,7 +157,7 @@ You can customize the CapStyle property of the radial bar based on its types. + CapStyle="BothCurve"/> {% endhighlight %} @@ -181,9 +181,9 @@ this.Content = chart; ![.NET MAUI Radial bar chart cap style customization](Chart-Types_images/maui_bothcurve.png) -## Segment spacing +## Segment Spacing -The [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_GapRatio) property of the radial bar series is used to define the spacing between each segments. The default value of this property is `0.2`. +The [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_GapRatio) property of the radial bar series is used to define the spacing between each segment. The default value of this property is `0.2`. {% tabs %} @@ -208,7 +208,7 @@ series.ItemsSource = (new SalesViewModel()).Data; series.XBindingPath = "Product"; series.YBindingPath = "SalesRate"; series.InnerRadius = 0.2; -series.GapRatio = 0.4; // Set the gap ratio between each radial bar +series.GapRatio = 0.4; // Set the gap ratio between each radial bar (40% of available space) chart.Series.Add(series); this.Content = chart; @@ -219,15 +219,15 @@ this.Content = chart; ![.NET MAUI Radial bar chart segment spacing customization](Chart-Types_images/maui_gapratio.png) -## Track customization +## Track Customization -You can use the following properties to customize the appearance of the circular bar track. +You can use the following properties to customize the appearance of the circular bar track: - * [TrackStroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_TrackStroke) - To customize the circular bar border color. + * [TrackStroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_TrackStroke) - Customizes the circular bar border color. - * [TrackStrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_TrackStrokeWidth) - To customize the border width of the circular bar. + * [TrackStrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_TrackStrokeWidth) - Customizes the border width of the circular bar. - * [TrackFill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_TrackFill) - To customize the circular bar area which behind the radial bar segments. + * [TrackFill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_TrackFill) - Customizes the circular bar area which is behind the radial bar segments. {% tabs %} @@ -266,11 +266,11 @@ this.Content = chart; ## CenterView - Any view can be added to the center of the radial bar chart using the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterView) property of [RadialBarSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html). The view placed in the center of the radial bar chart is useful for sharing additional information about the radial bar chart.The binding context of the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterView) will be the respective radial bar series. +Any view can be added to the center of the radial bar chart using the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterView) property of [RadialBarSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html). The view placed in the center of the radial bar chart is useful for sharing additional information about the chart. The binding context of the [CenterView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterView) will be the respective radial bar series. ### CenterHoleSize -The [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterHoleSize) property of RadialBarSeries is used to get the diameter value of the center hole. Using the CenterHoleSize, we can protect the view in the radial bar center from overlapping with the series +The [CenterHoleSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RadialBarSeries.html#Syncfusion_Maui_Toolkit_Charts_RadialBarSeries_CenterHoleSize) property of RadialBarSeries is used to get the diameter value of the center hole. Using the CenterHoleSize, you can ensure that the view in the radial bar center doesn't overlap with the series. {% tabs %} @@ -320,3 +320,4 @@ this.Content = chart; {% endtabs %} ![.NET MAUI Radial bar chart center view customization](Chart-Types_images/maui_radialbarchart_centerview.png) + diff --git a/maui-toolkit/Circular-Charts/Selection.md b/maui-toolkit/Circular-Charts/Selection.md index fec65390..b201e098 100644 --- a/maui-toolkit/Circular-Charts/Selection.md +++ b/maui-toolkit/Circular-Charts/Selection.md @@ -2,6 +2,7 @@ layout: post title: Selection in .NET MAUI Chart control | Syncfusion description: This section explains about how to configure the selection support and its features applying in .NET MAUI Chart (SfCircularChart). +description: This section explains about how to configure the selection support and its features in Syncfusion® .NET MAUI Chart (SfCircularChart). platform: maui-toolkit control: SfCircularChart documentation: ug @@ -10,10 +11,13 @@ documentation: ug # Selection in .NET MAUI Chart The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) provides selection behavior support, which allows you to select or highlight a segment (data points) in a series using the [DataPointSelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataPointSelectionBehavior.html). +The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) provides selection behavior support, which allows you to select or highlight a segment (data point) in a series using the [DataPointSelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataPointSelectionBehavior.html). ## Enable selection +## Enable Selection To enable the data point selection, create an instance of the series [SelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_SelectionBehavior) property. +To enable the data point selection, create an instance of [DataPointSelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataPointSelectionBehavior.html) and assign it to the series [SelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_SelectionBehavior) property. {% tabs %} @@ -42,7 +46,7 @@ DataPointSelectionBehavior selection = new DataPointSelectionBehavior() }; DoughnutSeries series = new DoughnutSeries(); -. . . +// Other series configurations series.SelectionBehavior = selection; // Set the selection behavior for this series chart.Series.Add(series); this.Content = chart; @@ -51,13 +55,13 @@ this.Content = chart; {% endtabs %} -## Behavior customization +## Behavior Customization The following properties are used to customize the [ChartSelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSelectionBehavior.html): * [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSelectionBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartSelectionBehavior_Type) - Gets or sets the [ChartSelectionType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSelectionType.html) for the selection behavior. Chart selection types: - * `Single` - The user can select only one item at a time + * `Single` - The user can select only one item at a time. * `SingleDeselect` - The user can select and deselect only one item at a time. * `Multiple` - The user can select and deselect multiple items at a time. * `None` - The user can't select any item. diff --git a/maui-toolkit/Circular-Charts/Tooltip.md b/maui-toolkit/Circular-Charts/Tooltip.md index f3f8b961..a6f6ad67 100644 --- a/maui-toolkit/Circular-Charts/Tooltip.md +++ b/maui-toolkit/Circular-Charts/Tooltip.md @@ -9,18 +9,18 @@ documentation: ug # Tooltip in .NET MAUI Chart -Tooltip is used to display any information or metadata of the tapped segment. The Circular Chart provides tooltip support for all series. +Tooltip is used to display information or metadata of the tapped segment. The Circular Chart provides tooltip support for all series. ## Define Tooltip -To define the tooltip in the chart, set the [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_EnableTooltip) property of series to true. The default value of [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_EnableTooltip) property is false. +To define the tooltip in the chart, set the [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_EnableTooltip) property of series to true. The default value of the [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_EnableTooltip) property is false. {% tabs %} {% highlight xaml %} - . . . + @@ -29,7 +29,7 @@ To define the tooltip in the chart, set the [EnableTooltip](https://help.syncfus {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations PieSeries series = new PieSeries(); series.EnableTooltip = true; // Enable tooltips for this series chart.Series.Add(series); @@ -41,22 +41,22 @@ this.Content = chart; ![Tooltip support in MAUI chart](Tooltip_images/maui_chart_tooltip.png) -The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) is used to customize the tooltip. For customizing the tooltip, create an instance [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) and set it to the [TooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_TooltipBehavior) property of [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html). The following properties are used to customize the tooltip: +The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) is used to customize the tooltip. For customizing the tooltip, create an instance of [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) and set it to the [TooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_TooltipBehavior) property of [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html). The following properties are used to customize the tooltip: -* [Background](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Background) - Gets or sets the background color to the tooltip label. -* [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontAttributes) - Gets or sets the font style for the label. -* [FontFamily](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontFamily) - Gets or sets the font family name for the label. -* [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontSize) - Gets or sets the font size for the label. -* [Duration](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Duration) - Gets or sets the duration of the tooltip text in seconds. -* [Margin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Margin) - Gets or sets the margin of the label to customize the appearance of label. -* [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_TextColor) - Used to set the color for the text of the label. +* [Background](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Background) - Gets or sets the background color of the tooltip. +* [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontAttributes) - Gets or sets the font style for the tooltip text. +* [FontFamily](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontFamily) - Gets or sets the font family name for the tooltip text. +* [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontSize) - Gets or sets the font size for the tooltip text. +* [Duration](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Duration) - Gets or sets the duration in milliseconds for which the tooltip remains visible. +* [Margin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Margin) - Gets or sets the margin of the tooltip to customize its appearance. +* [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_TextColor) - Gets or sets the color for the tooltip text. {% tabs %} {% highlight xml %} - . . . + @@ -67,10 +67,10 @@ The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusio {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations chart.TooltipBehavior = new ChartTooltipBehavior() { - Duration = 2000, // Set the tooltip display duration + Duration = 2000, // Set the tooltip display duration in milliseconds }; this.Content = chart; {% endhighlight %} @@ -86,7 +86,7 @@ Circular chart provides support to customize the appearance of the tooltip by us {% highlight xaml %} - . . . + @@ -117,7 +117,6 @@ Circular chart provides support to customize the appearance of the tooltip by us XBindingPath="Product" YBindingPath="SalesRate" TooltipTemplate="{StaticResource tooltipTemplate}"/> - . . . {% endhighlight %} @@ -125,12 +124,12 @@ Circular chart provides support to customize the appearance of the tooltip by us {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other chart configurations PieSeries series = new PieSeries(); series.EnableTooltip = true; series.TooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate; // Set a custom tooltip template from the chart's resources -. . . - +// Other series configurations +chart.Series.Add(series); this.Content = chart; {% endhighlight %} @@ -138,3 +137,4 @@ this.Content = chart; {% endtabs %} ![Tooltip template in MAUI Chart](Tooltip_images/maui_chart_tooltip_customization.png) + From 0b083391e55083a4d066fbdd7c87c83b70092e06 Mon Sep 17 00:00:00 2001 From: NitheeshKumarThangaraj Date: Tue, 1 Jul 2025 10:50:09 +0530 Subject: [PATCH 4/8] Addressed the review changes --- maui-toolkit/Circular-Charts/Appearance.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/maui-toolkit/Circular-Charts/Appearance.md b/maui-toolkit/Circular-Charts/Appearance.md index 584c6679..eb39f5ca 100644 --- a/maui-toolkit/Circular-Charts/Appearance.md +++ b/maui-toolkit/Circular-Charts/Appearance.md @@ -68,7 +68,7 @@ The gradient for the circular chart can be set by using the [PaletteBrushes](htt @@ -99,8 +99,8 @@ public class ViewModel LinearGradientBrush gradientColor2 = new LinearGradientBrush(); gradientColor2.GradientStops = new GradientStopCollection() { - new GradientStop() { Offset = 1, Color = Color.FromRgb(180, 225, 151) }, - new GradientStop() { Offset = 0, Color = Color.FromRgb(111, 183, 214) } + new GradientStop() { Offset = 1, Color = Color.FromRgb(250, 221, 125) }, + new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 204, 45) } }; // Create and configure gradient brush 3 @@ -122,10 +122,10 @@ public class ViewModel // Create and configure gradient brush 5 LinearGradientBrush gradientColor5 = new LinearGradientBrush(); gradientColor5.GradientStops = new GradientStopCollection() -{ + { new GradientStop() { Offset = 1, Color = Color.FromRgb(168, 234, 238) }, new GradientStop() { Offset = 0, Color = Color.FromRgb(123, 176, 249) } -}; + }; // Add all gradient brushes to the CustomBrushes list CustomBrushes.Add(gradientColor1); @@ -186,7 +186,7 @@ AbsoluteLayout absoluteLayout = new AbsoluteLayout(); // Create a border for the chart plot area var border = new Border() { - Stroke = new SolidColorBrush(Colors.Red), + Stroke = Colors.Red, StrokeThickness = 2 }; AbsoluteLayout.SetLayoutBounds(border, new Rect(0, 0, 1, 1)); From 6dd2235390673fdbe10c6b9696b39e9b025efd98 Mon Sep 17 00:00:00 2001 From: NitheeshKumarThangaraj Date: Tue, 1 Jul 2025 10:53:11 +0530 Subject: [PATCH 5/8] Aligned the code --- maui-toolkit/Circular-Charts/Appearance.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/maui-toolkit/Circular-Charts/Appearance.md b/maui-toolkit/Circular-Charts/Appearance.md index eb39f5ca..7cf2907f 100644 --- a/maui-toolkit/Circular-Charts/Appearance.md +++ b/maui-toolkit/Circular-Charts/Appearance.md @@ -67,11 +67,10 @@ The gradient for the circular chart can be set by using the [PaletteBrushes](htt {% highlight xaml %} - + {% endhighlight %} From 392bb732bac14778e16c658b98d4831ea39f22c3 Mon Sep 17 00:00:00 2001 From: NitheeshKumarThangaraj Date: Tue, 1 Jul 2025 17:12:36 +0530 Subject: [PATCH 6/8] Added the keywords for the circular chart --- maui-toolkit/Circular-Charts/Appearance.md | 1 + maui-toolkit/Circular-Charts/DataLabels.md | 1 + maui-toolkit/Circular-Charts/DoughnutChart.md | 1 + maui-toolkit/Circular-Charts/Explode.md | 1 + maui-toolkit/Circular-Charts/Exporting.md | 1 + maui-toolkit/Circular-Charts/Getting-Started.md | 1 + maui-toolkit/Circular-Charts/GroupTo.md | 1 + maui-toolkit/Circular-Charts/Overview.md | 1 + maui-toolkit/Circular-Charts/PieChart.md | 1 + maui-toolkit/Circular-Charts/RadialBarChart.md | 1 + maui-toolkit/Circular-Charts/Selection.md | 2 +- maui-toolkit/Circular-Charts/Tooltip.md | 1 + 12 files changed, 12 insertions(+), 1 deletion(-) diff --git a/maui-toolkit/Circular-Charts/Appearance.md b/maui-toolkit/Circular-Charts/Appearance.md index 7cf2907f..c45ebbbd 100644 --- a/maui-toolkit/Circular-Charts/Appearance.md +++ b/maui-toolkit/Circular-Charts/Appearance.md @@ -5,6 +5,7 @@ description: Learn here all about appearance customization in .NET MAUI Chart (S platform: maui-toolkit control: SfCircularChart documentation: ug +keywords: .net maui chart appearance, series brushes maui chart, syncfusion circular chart custom palette, gradient brushes circular chart, plotting area customization maui chart. --- # Appearance in .NET MAUI Circular Chart diff --git a/maui-toolkit/Circular-Charts/DataLabels.md b/maui-toolkit/Circular-Charts/DataLabels.md index 1835e17a..f4911080 100644 --- a/maui-toolkit/Circular-Charts/DataLabels.md +++ b/maui-toolkit/Circular-Charts/DataLabels.md @@ -5,6 +5,7 @@ description: This section explains how to configure the data labels and their fe platform: maui-toolkit control: SfCircularChart documentation: ug +keywords: .net maui chart data labels, enable data labels maui chart, customize data labels syncfusion, smart labels maui chart, connector line style maui chart. --- # Data Labels in .NET MAUI Chart diff --git a/maui-toolkit/Circular-Charts/DoughnutChart.md b/maui-toolkit/Circular-Charts/DoughnutChart.md index ddbfd146..b57c2905 100644 --- a/maui-toolkit/Circular-Charts/DoughnutChart.md +++ b/maui-toolkit/Circular-Charts/DoughnutChart.md @@ -5,6 +5,7 @@ description: Learn here all about doughnut chart and its features in Syncfusion platform: maui-toolkit control: SfCircularChart documentation: ug +keywords: .net maui chart doughnut, syncfusion doughnut chart maui, doughnut series maui chart, circular chart inner radius maui, semi doughnut chart maui, center view doughnut chart maui --- # Doughnut Chart in .NET MAUI Chart diff --git a/maui-toolkit/Circular-Charts/Explode.md b/maui-toolkit/Circular-Charts/Explode.md index 91d474c4..20d21596 100644 --- a/maui-toolkit/Circular-Charts/Explode.md +++ b/maui-toolkit/Circular-Charts/Explode.md @@ -5,6 +5,7 @@ description: This section explains about how to explode single segment or all se platform: maui-toolkit control: SfCircularChart documentation: ug +keywords: .net maui chart explode, circular chart explode segments, segment explosion maui chart, syncfusion chart explode feature, explode all segments --- # Explode Segments in .NET MAUI SfCircularChart diff --git a/maui-toolkit/Circular-Charts/Exporting.md b/maui-toolkit/Circular-Charts/Exporting.md index d94f2b61..92fd8c92 100644 --- a/maui-toolkit/Circular-Charts/Exporting.md +++ b/maui-toolkit/Circular-Charts/Exporting.md @@ -5,6 +5,7 @@ description: Learn here how to export the chart view as an image and stream in t platform: maui-toolkit control: SfCircularChart documentation: ug +keywords: .net maui chart export image, save chart as image maui, syncfusion chart stream export, export chart jpeg png maui, maui chart image stream. --- # Exporting in .NET MAUI Chart diff --git a/maui-toolkit/Circular-Charts/Getting-Started.md b/maui-toolkit/Circular-Charts/Getting-Started.md index 8cae61b8..9632a50a 100644 --- a/maui-toolkit/Circular-Charts/Getting-Started.md +++ b/maui-toolkit/Circular-Charts/Getting-Started.md @@ -5,6 +5,7 @@ description: Learn here all about getting started with Syncfusion® .NET MAUI Ch platform: maui-toolkit control: SfCircularChart documentation: ug +keywords: .net maui chart setup, syncfusion chart beginners guide, initialize circular chart maui, configure chart series maui. --- # Getting Started with .NET MAUI Circular Chart diff --git a/maui-toolkit/Circular-Charts/GroupTo.md b/maui-toolkit/Circular-Charts/GroupTo.md index 0be88cdd..c857a970 100644 --- a/maui-toolkit/Circular-Charts/GroupTo.md +++ b/maui-toolkit/Circular-Charts/GroupTo.md @@ -5,6 +5,7 @@ description: This section explains about how to group data points in Syncfusion platform: maui-toolkit control: SfCircularChart documentation: ug +keywords: .net maui chart group data, group small segments maui chart, syncfusion circular chart grouping, pie chart group segment maui, data point grouping maui chart --- # Grouping Data Points in .NET MAUI SfCircularChart diff --git a/maui-toolkit/Circular-Charts/Overview.md b/maui-toolkit/Circular-Charts/Overview.md index 9f8e70d3..70e211e3 100644 --- a/maui-toolkit/Circular-Charts/Overview.md +++ b/maui-toolkit/Circular-Charts/Overview.md @@ -5,6 +5,7 @@ description: Learn here all about introduction of Syncfusion® .NET MAUI Chart ( platform: maui-toolkit control: SfCircularChart documentation: ug +keywords: .net maui circular charts overview, chart features maui toolkit, syncfusion circular chart overview, circular chart key features, chart types maui chart. --- # .NET MAUI Circular Chart Overview diff --git a/maui-toolkit/Circular-Charts/PieChart.md b/maui-toolkit/Circular-Charts/PieChart.md index 1ba9a3a1..c23ba9fd 100644 --- a/maui-toolkit/Circular-Charts/PieChart.md +++ b/maui-toolkit/Circular-Charts/PieChart.md @@ -5,6 +5,7 @@ description: Learn here all about the pie chart and its features in Syncfusion® platform: maui-toolkit control: SfCircularChart documentation: ug +keywords: .net maui pie chart, pie series circular chart, maui pie chart features, syncfusion pie chart maui, pie chart customization. --- # Pie Chart in .NET MAUI Chart diff --git a/maui-toolkit/Circular-Charts/RadialBarChart.md b/maui-toolkit/Circular-Charts/RadialBarChart.md index a2a74339..d595e821 100644 --- a/maui-toolkit/Circular-Charts/RadialBarChart.md +++ b/maui-toolkit/Circular-Charts/RadialBarChart.md @@ -5,6 +5,7 @@ description: Learn here all about radial bar chart and its features in Syncfusio platform: maui-toolkit control: SfCircularChart documentation: ug +keywords: .net maui chart radial bar, circular chart custom size maui, radial bar cap style maui, segment spacing radial bar chart, radial bar center view maui. --- # Radial Bar Chart in .NET MAUI Chart diff --git a/maui-toolkit/Circular-Charts/Selection.md b/maui-toolkit/Circular-Charts/Selection.md index b201e098..ea504e1e 100644 --- a/maui-toolkit/Circular-Charts/Selection.md +++ b/maui-toolkit/Circular-Charts/Selection.md @@ -6,6 +6,7 @@ description: This section explains about how to configure the selection support platform: maui-toolkit control: SfCircularChart documentation: ug +keywords: .net maui chart selection, data point selection maui chart, chart selection behavior maui, syncfusion chart selection customization, highlight chart segment. --- # Selection in .NET MAUI Chart @@ -14,7 +15,6 @@ The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Mau The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) provides selection behavior support, which allows you to select or highlight a segment (data point) in a series using the [DataPointSelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataPointSelectionBehavior.html). ## Enable selection -## Enable Selection To enable the data point selection, create an instance of the series [SelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_SelectionBehavior) property. To enable the data point selection, create an instance of [DataPointSelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataPointSelectionBehavior.html) and assign it to the series [SelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_SelectionBehavior) property. diff --git a/maui-toolkit/Circular-Charts/Tooltip.md b/maui-toolkit/Circular-Charts/Tooltip.md index a6f6ad67..f5b253ad 100644 --- a/maui-toolkit/Circular-Charts/Tooltip.md +++ b/maui-toolkit/Circular-Charts/Tooltip.md @@ -5,6 +5,7 @@ description: This section explains about how to enable tooltip and its customiza platform: maui-toolkit control: SfCircularChart documentation: ug +keywords: .net maui chart tooltip, enable tooltip maui chart, syncfusion circular chart tooltip customization, tooltip template maui chart, chart series tooltip behavior. --- # Tooltip in .NET MAUI Chart From 1837dd4689fee2f4efbddb580ab5c72363a87ffb Mon Sep 17 00:00:00 2001 From: VimalaThirumalaiKumarSF3739 Date: Fri, 18 Jul 2025 08:41:54 +0530 Subject: [PATCH 7/8] keywords modified --- maui-toolkit/Circular-Charts/Appearance.md | 2 +- maui-toolkit/Circular-Charts/DataLabels.md | 2 +- maui-toolkit/Circular-Charts/DoughnutChart.md | 2 +- maui-toolkit/Circular-Charts/Explode.md | 2 +- maui-toolkit/Circular-Charts/Exporting.md | 4 ++-- maui-toolkit/Circular-Charts/Getting-Started.md | 10 +++++----- maui-toolkit/Circular-Charts/GroupTo.md | 2 +- maui-toolkit/Circular-Charts/Legend.md | 2 +- maui-toolkit/Circular-Charts/Overview.md | 2 +- maui-toolkit/Circular-Charts/PieChart.md | 2 +- maui-toolkit/Circular-Charts/RadialBarChart.md | 2 +- maui-toolkit/Circular-Charts/Selection.md | 2 +- maui-toolkit/Circular-Charts/Tooltip.md | 2 +- 13 files changed, 18 insertions(+), 18 deletions(-) diff --git a/maui-toolkit/Circular-Charts/Appearance.md b/maui-toolkit/Circular-Charts/Appearance.md index c45ebbbd..5fe296cb 100644 --- a/maui-toolkit/Circular-Charts/Appearance.md +++ b/maui-toolkit/Circular-Charts/Appearance.md @@ -5,7 +5,7 @@ description: Learn here all about appearance customization in .NET MAUI Chart (S platform: maui-toolkit control: SfCircularChart documentation: ug -keywords: .net maui chart appearance, series brushes maui chart, syncfusion circular chart custom palette, gradient brushes circular chart, plotting area customization maui chart. +keywords: .net maui, maui chart, maui toolkit chart, chart appearance, circular chart, syncfusion circular chart, series brushes, custom palette, gradient brushes, plotting area customization. --- # Appearance in .NET MAUI Circular Chart diff --git a/maui-toolkit/Circular-Charts/DataLabels.md b/maui-toolkit/Circular-Charts/DataLabels.md index f4911080..da79df30 100644 --- a/maui-toolkit/Circular-Charts/DataLabels.md +++ b/maui-toolkit/Circular-Charts/DataLabels.md @@ -5,7 +5,7 @@ description: This section explains how to configure the data labels and their fe platform: maui-toolkit control: SfCircularChart documentation: ug -keywords: .net maui chart data labels, enable data labels maui chart, customize data labels syncfusion, smart labels maui chart, connector line style maui chart. +keywords: .net maui, maui chart, maui toolkit chart, data labels, enable data labels, customize data labels, smart labels, connector line style. --- # Data Labels in .NET MAUI Chart diff --git a/maui-toolkit/Circular-Charts/DoughnutChart.md b/maui-toolkit/Circular-Charts/DoughnutChart.md index b57c2905..70ed3333 100644 --- a/maui-toolkit/Circular-Charts/DoughnutChart.md +++ b/maui-toolkit/Circular-Charts/DoughnutChart.md @@ -5,7 +5,7 @@ description: Learn here all about doughnut chart and its features in Syncfusion platform: maui-toolkit control: SfCircularChart documentation: ug -keywords: .net maui chart doughnut, syncfusion doughnut chart maui, doughnut series maui chart, circular chart inner radius maui, semi doughnut chart maui, center view doughnut chart maui +keywords: .net maui, maui chart, maui toolkit chart, doughnut chart, doughnut series, doughnut chart features, doughnut chart customization, semi doughnut chart, center view doughnut chart. --- # Doughnut Chart in .NET MAUI Chart diff --git a/maui-toolkit/Circular-Charts/Explode.md b/maui-toolkit/Circular-Charts/Explode.md index 20d21596..4958877e 100644 --- a/maui-toolkit/Circular-Charts/Explode.md +++ b/maui-toolkit/Circular-Charts/Explode.md @@ -5,7 +5,7 @@ description: This section explains about how to explode single segment or all se platform: maui-toolkit control: SfCircularChart documentation: ug -keywords: .net maui chart explode, circular chart explode segments, segment explosion maui chart, syncfusion chart explode feature, explode all segments +keywords: .net maui, maui chart, maui toolkit chart, explode segments, explode all segments, explode single segment, explode index, explode radius, explode on touch. --- # Explode Segments in .NET MAUI SfCircularChart diff --git a/maui-toolkit/Circular-Charts/Exporting.md b/maui-toolkit/Circular-Charts/Exporting.md index 92fd8c92..84a58bdc 100644 --- a/maui-toolkit/Circular-Charts/Exporting.md +++ b/maui-toolkit/Circular-Charts/Exporting.md @@ -5,7 +5,7 @@ description: Learn here how to export the chart view as an image and stream in t platform: maui-toolkit control: SfCircularChart documentation: ug -keywords: .net maui chart export image, save chart as image maui, syncfusion chart stream export, export chart jpeg png maui, maui chart image stream. +keywords: .net maui, maui chart, maui toolkit chart, export chart, export chart as image, export chart as stream, save chart, save chart as image, save chart as stream, export chart jpeg png maui, maui chart image stream. --- # Exporting in .NET MAUI Chart @@ -52,7 +52,7 @@ Add the following code snippet to the "Info.plist" file: {% tabs %} -{% highlight xml %} +{% highlight xaml %} ... diff --git a/maui-toolkit/Circular-Charts/Getting-Started.md b/maui-toolkit/Circular-Charts/Getting-Started.md index 9632a50a..5f0c0f16 100644 --- a/maui-toolkit/Circular-Charts/Getting-Started.md +++ b/maui-toolkit/Circular-Charts/Getting-Started.md @@ -5,7 +5,7 @@ description: Learn here all about getting started with Syncfusion® .NET MAUI Ch platform: maui-toolkit control: SfCircularChart documentation: ug -keywords: .net maui chart setup, syncfusion chart beginners guide, initialize circular chart maui, configure chart series maui. +keywords: .net maui, maui chart, maui toolkit chart, chart setup, syncfusion chart beginners guide, initialize circular chart, configure chart series. --- # Getting Started with .NET MAUI Circular Chart @@ -88,8 +88,8 @@ In the **MauiProgram.cs** file, register the handler for Syncfusion® {% highlight C# %} using Syncfusion.Maui.Toolkit.Charts; - // Other using statements + public partial class MainPage : ContentPage { public MainPage() @@ -185,8 +185,8 @@ In the **MauiProgram.cs** file, register the handler for Syncfusion® {% highlight C# %} using Syncfusion.Maui.Toolkit.Charts; - // Other using statements + public partial class MainPage : ContentPage { public MainPage() @@ -280,8 +280,8 @@ In the **MauiProgram.cs** file, register the handler for Syncfusion® {% highlight C# %} using Syncfusion.Maui.Toolkit.Charts; - // Other using statements + public partial class MainPage : ContentPage { public MainPage() @@ -369,8 +369,8 @@ N> If you prefer to set the `BindingContext` in XAML, make sure to add the appro {% highlight C# %} using Syncfusion.Maui.Toolkit.Charts; - // Other using statements + public partial class MainPage : ContentPage { public MainPage() diff --git a/maui-toolkit/Circular-Charts/GroupTo.md b/maui-toolkit/Circular-Charts/GroupTo.md index c857a970..d1ae516e 100644 --- a/maui-toolkit/Circular-Charts/GroupTo.md +++ b/maui-toolkit/Circular-Charts/GroupTo.md @@ -5,7 +5,7 @@ description: This section explains about how to group data points in Syncfusion platform: maui-toolkit control: SfCircularChart documentation: ug -keywords: .net maui chart group data, group small segments maui chart, syncfusion circular chart grouping, pie chart group segment maui, data point grouping maui chart +keywords: .net maui, maui chart, maui toolkit chart, group data, group small segments, syncfusion circular chart grouping, pie chart group segment, data point grouping. --- # Grouping Data Points in .NET MAUI SfCircularChart diff --git a/maui-toolkit/Circular-Charts/Legend.md b/maui-toolkit/Circular-Charts/Legend.md index a1443177..73f26ae5 100644 --- a/maui-toolkit/Circular-Charts/Legend.md +++ b/maui-toolkit/Circular-Charts/Legend.md @@ -5,7 +5,7 @@ description: This section explains about how to initialize legend and its custom platform: maui-toolkit control: SfCircularChart documentation: ug -keywords: .net maui circular chart, chart legend, legend-wrap, legend view, legend layout, chart legend items, legend alignment. +keywords: .net maui, maui chart, maui toolkit chart, circular chart, chart legend, legend-wrap, legend view, legend layout, chart legend items. --- # Legend in .NET MAUI Chart (SfCircularChart) diff --git a/maui-toolkit/Circular-Charts/Overview.md b/maui-toolkit/Circular-Charts/Overview.md index 70e211e3..3bdd3c7f 100644 --- a/maui-toolkit/Circular-Charts/Overview.md +++ b/maui-toolkit/Circular-Charts/Overview.md @@ -5,7 +5,7 @@ description: Learn here all about introduction of Syncfusion® .NET MAUI Chart ( platform: maui-toolkit control: SfCircularChart documentation: ug -keywords: .net maui circular charts overview, chart features maui toolkit, syncfusion circular chart overview, circular chart key features, chart types maui chart. +keywords: .net maui, maui chart, maui toolkit chart, circular chart, chart features, chart types, chart key features, circular charts overview. --- # .NET MAUI Circular Chart Overview diff --git a/maui-toolkit/Circular-Charts/PieChart.md b/maui-toolkit/Circular-Charts/PieChart.md index c23ba9fd..5c1899de 100644 --- a/maui-toolkit/Circular-Charts/PieChart.md +++ b/maui-toolkit/Circular-Charts/PieChart.md @@ -5,7 +5,7 @@ description: Learn here all about the pie chart and its features in Syncfusion® platform: maui-toolkit control: SfCircularChart documentation: ug -keywords: .net maui pie chart, pie series circular chart, maui pie chart features, syncfusion pie chart maui, pie chart customization. +keywords: .net maui, maui chart, maui toolkit chart, circular chart, pie chart, pie chart features, pie chart customization. --- # Pie Chart in .NET MAUI Chart diff --git a/maui-toolkit/Circular-Charts/RadialBarChart.md b/maui-toolkit/Circular-Charts/RadialBarChart.md index d595e821..8dcd2429 100644 --- a/maui-toolkit/Circular-Charts/RadialBarChart.md +++ b/maui-toolkit/Circular-Charts/RadialBarChart.md @@ -5,7 +5,7 @@ description: Learn here all about radial bar chart and its features in Syncfusio platform: maui-toolkit control: SfCircularChart documentation: ug -keywords: .net maui chart radial bar, circular chart custom size maui, radial bar cap style maui, segment spacing radial bar chart, radial bar center view maui. +keywords: .net maui, maui chart, maui toolkit chart, radial bar chart, radial bar chart features, radial bar cap style, segment spacing radial bar chart, radial bar center view. --- # Radial Bar Chart in .NET MAUI Chart diff --git a/maui-toolkit/Circular-Charts/Selection.md b/maui-toolkit/Circular-Charts/Selection.md index ea504e1e..3a60eb92 100644 --- a/maui-toolkit/Circular-Charts/Selection.md +++ b/maui-toolkit/Circular-Charts/Selection.md @@ -6,7 +6,7 @@ description: This section explains about how to configure the selection support platform: maui-toolkit control: SfCircularChart documentation: ug -keywords: .net maui chart selection, data point selection maui chart, chart selection behavior maui, syncfusion chart selection customization, highlight chart segment. +keywords: .net maui, maui chart, maui toolkit chart, circular chart, chart selection, chart selection behavior, data point selection, highlight chart segment, chart selection customization. --- # Selection in .NET MAUI Chart diff --git a/maui-toolkit/Circular-Charts/Tooltip.md b/maui-toolkit/Circular-Charts/Tooltip.md index f5b253ad..7d77e5a5 100644 --- a/maui-toolkit/Circular-Charts/Tooltip.md +++ b/maui-toolkit/Circular-Charts/Tooltip.md @@ -5,7 +5,7 @@ description: This section explains about how to enable tooltip and its customiza platform: maui-toolkit control: SfCircularChart documentation: ug -keywords: .net maui chart tooltip, enable tooltip maui chart, syncfusion circular chart tooltip customization, tooltip template maui chart, chart series tooltip behavior. +keywords: .net maui, maui chart, maui toolkit chart, circular chart, chart tooltip, chart tooltip behavior, enable tooltip, chart tooltip customization, tooltip template. --- # Tooltip in .NET MAUI Chart From 5ccdf52e007c8978898281d565ad7734c536f830 Mon Sep 17 00:00:00 2001 From: NitheeshKumarThangaraj Date: Fri, 18 Jul 2025 12:32:45 +0530 Subject: [PATCH 8/8] Committed the unwanted changes --- maui-toolkit/Circular-Charts/GroupTo.md | 2 +- maui-toolkit/Circular-Charts/Selection.md | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/maui-toolkit/Circular-Charts/GroupTo.md b/maui-toolkit/Circular-Charts/GroupTo.md index c857a970..f249895d 100644 --- a/maui-toolkit/Circular-Charts/GroupTo.md +++ b/maui-toolkit/Circular-Charts/GroupTo.md @@ -38,7 +38,7 @@ PieSeries series = new PieSeries() ItemsSource = new ViewModel().Data, XBindingPath = "Product", YBindingPath = "SalesRate", - GroupMode = ChartGroupMode.Value, // Set the mode for grouping smaller slices into a single slice + GroupMode = PieGroupMode.Value, // Set the mode for grouping smaller slices into a single slice GroupTo = 15 // Define a threshold value for the group mode }; diff --git a/maui-toolkit/Circular-Charts/Selection.md b/maui-toolkit/Circular-Charts/Selection.md index ea504e1e..408d7531 100644 --- a/maui-toolkit/Circular-Charts/Selection.md +++ b/maui-toolkit/Circular-Charts/Selection.md @@ -1,7 +1,6 @@ --- layout: post title: Selection in .NET MAUI Chart control | Syncfusion -description: This section explains about how to configure the selection support and its features applying in .NET MAUI Chart (SfCircularChart). description: This section explains about how to configure the selection support and its features in Syncfusion® .NET MAUI Chart (SfCircularChart). platform: maui-toolkit control: SfCircularChart @@ -11,12 +10,10 @@ keywords: .net maui chart selection, data point selection maui chart, chart sele # Selection in .NET MAUI Chart -The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) provides selection behavior support, which allows you to select or highlight a segment (data points) in a series using the [DataPointSelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataPointSelectionBehavior.html). The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) provides selection behavior support, which allows you to select or highlight a segment (data point) in a series using the [DataPointSelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataPointSelectionBehavior.html). ## Enable selection -To enable the data point selection, create an instance of the series [SelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_SelectionBehavior) property. To enable the data point selection, create an instance of [DataPointSelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DataPointSelectionBehavior.html) and assign it to the series [SelectionBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_SelectionBehavior) property. {% tabs %}