diff --git a/maui-toolkit/Circular-Charts/Appearance.md b/maui-toolkit/Circular-Charts/Appearance.md index 3807948b..c45ebbbd 100644 --- a/maui-toolkit/Circular-Charts/Appearance.md +++ b/maui-toolkit/Circular-Charts/Appearance.md @@ -1,38 +1,35 @@ --- 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 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 -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 +53,6 @@ public class ViewModel // ... Other methods and properties ... } - {% endhighlight %} {% endtabs %} @@ -70,19 +66,16 @@ 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,7 +95,6 @@ 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() @@ -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, 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..f4911080 100644 --- a/maui-toolkit/Circular-Charts/DataLabels.md +++ b/maui-toolkit/Circular-Charts/DataLabels.md @@ -1,36 +1,35 @@ --- 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 +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 -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 +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 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 +64,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 +87,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 +108,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 +133,7 @@ When the [SmartLabelAlignment](https://help.syncfusion.com/cr/maui-toolkit/Syncf - ... + @@ -157,7 +154,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 +163,7 @@ series.ShowDataLabels = true; DataTemplate labelTemplate = new DataTemplate(() => { - // ... (Custom label template definition goes here) + // Custom label template definition }); series.LabelTemplate = labelTemplate; @@ -189,14 +186,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 +206,7 @@ this.Content = chart; {% highlight c# %} SfCircularChart chart = new SfCircularChart(); -. . . +// Other configurations PieSeries series = new PieSeries(); series.ShowDataLabels = true; @@ -232,18 +229,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 +297,6 @@ The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Mau ShowDataLabels="True" LabelTemplate="{StaticResource labelTemplate}"> - {% endhighlight %} @@ -443,4 +436,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..b57c2905 100644 --- a/maui-toolkit/Circular-Charts/DoughnutChart.md +++ b/maui-toolkit/Circular-Charts/DoughnutChart.md @@ -1,15 +1,16 @@ --- 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 +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 -[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 +31,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 +49,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 +71,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 +85,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 +122,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 +152,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 +160,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 +174,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 +185,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..20d21596 100644 --- a/maui-toolkit/Circular-Charts/Explode.md +++ b/maui-toolkit/Circular-Charts/Explode.md @@ -5,13 +5,14 @@ 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 +# 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 +23,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 +30,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 +37,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 +67,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 +94,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..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 @@ -18,18 +19,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 +89,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 +113,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 +186,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 +211,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 +281,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 +332,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 +370,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 +400,7 @@ N> To plot the series, the [XBindingPath](https://help.syncfusion.com/cr/maui-to {% highlight xaml %} - . . . + @@ -432,7 +429,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 +439,7 @@ The title of the chart acts as the title to provide quick information to the use - . . . + {% endhighlight %} @@ -456,7 +453,7 @@ chart.Title = new Label() { Text = "PRODUCT SALES", }; -. . . +// Other chart configurations this.Content = chart; {% endhighlight %} @@ -471,7 +468,7 @@ The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui {% 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); @@ -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,14 +516,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 +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..c857a970 100644 --- a/maui-toolkit/Circular-Charts/GroupTo.md +++ b/maui-toolkit/Circular-Charts/GroupTo.md @@ -5,26 +5,26 @@ 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 -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 +32,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..70e211e3 100644 --- a/maui-toolkit/Circular-Charts/Overview.md +++ b/maui-toolkit/Circular-Charts/Overview.md @@ -1,15 +1,16 @@ --- 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 +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 -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..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 @@ -35,7 +36,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 +71,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 +108,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..d595e821 100644 --- a/maui-toolkit/Circular-Charts/RadialBarChart.md +++ b/maui-toolkit/Circular-Charts/RadialBarChart.md @@ -1,10 +1,11 @@ --- 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 +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 @@ -15,17 +16,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 +50,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 +60,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 +85,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 +96,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 +108,7 @@ The [InnerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.To + InnerRadius="0.1"/> {% endhighlight %} @@ -120,7 +121,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 +132,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 +158,7 @@ You can customize the CapStyle property of the radial bar based on its types. + CapStyle="BothCurve"/> {% endhighlight %} @@ -181,9 +182,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 +209,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 +220,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 +267,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 +321,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..ea504e1e 100644 --- a/maui-toolkit/Circular-Charts/Selection.md +++ b/maui-toolkit/Circular-Charts/Selection.md @@ -2,18 +2,22 @@ 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 +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 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 %} @@ -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..f5b253ad 100644 --- a/maui-toolkit/Circular-Charts/Tooltip.md +++ b/maui-toolkit/Circular-Charts/Tooltip.md @@ -5,22 +5,23 @@ 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 -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 +30,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 +42,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 +68,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 +87,7 @@ Circular chart provides support to customize the appearance of the tooltip by us {% highlight xaml %} - . . . + @@ -117,7 +118,6 @@ Circular chart provides support to customize the appearance of the tooltip by us XBindingPath="Product" YBindingPath="SalesRate" TooltipTemplate="{StaticResource tooltipTemplate}"/> - . . . {% endhighlight %} @@ -125,12 +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 +chart.Series.Add(series); this.Content = chart; {% endhighlight %} @@ -138,3 +138,4 @@ this.Content = chart; {% endtabs %} ![Tooltip template in MAUI Chart](Tooltip_images/maui_chart_tooltip_customization.png) +