diff --git a/maui-toolkit/Funnel-Charts/Appearance.md b/maui-toolkit/Funnel-Charts/Appearance.md index 10b820a4..7aa49473 100644 --- a/maui-toolkit/Funnel-Charts/Appearance.md +++ b/maui-toolkit/Funnel-Charts/Appearance.md @@ -1,19 +1,20 @@ --- 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 (SfFunnelChart), its elements and more. platform: maui-toolkit control: SfFunnelChart documentation: ug +keywords: .net maui funnel chart, appearance customization, palette brushes, gradient effects, custom palette, maui toolkit --- # 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 using predefined palettes, custom palettes, and gradients to enhance the visual appeal of your application. ## Custom PaletteBrushes -The [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html) allows you to define your own brushes with preferred order by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_PaletteBrushes) property, as shown in the code below. +The [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html) allows you to define your own brushes with a preferred order by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_PaletteBrushes) property, as shown in the code below. {% tabs %} @@ -57,7 +58,7 @@ public class AdmissionViewModel ## Applying Gradient -The gradient for the funnel chart can be set by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_PaletteBrushes) property of the chart with the help of the `LinearGradientBrush` or `RadialGradientBrush`. +You can apply gradient effects to the funnel chart segments by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_PaletteBrushes) property with either `LinearGradientBrush` or `RadialGradientBrush`. {% tabs %} @@ -131,4 +132,4 @@ public class AdmissionViewModel {% endtabs %} -![Gradient support in MAUI Chart](Appearance_images/MAUI_funnel_chart.png) +![Gradient support in MAUI Chart](Appearance_images/MAUI_funnel_chart.png) \ No newline at end of file diff --git a/maui-toolkit/Funnel-Charts/DataLabels.md b/maui-toolkit/Funnel-Charts/DataLabels.md index c40d2c50..13214fca 100644 --- a/maui-toolkit/Funnel-Charts/DataLabels.md +++ b/maui-toolkit/Funnel-Charts/DataLabels.md @@ -5,6 +5,7 @@ description: This section explains about how to configure the data labels and it platform: maui-toolkit control: SfFunnelChart documentation: ug +keywords: .net maui funnel chart, enable data labels, data label customization, funnel data label context, data label style, maui toolkit --- # Data Labels in .NET MAUI Chart @@ -37,20 +38,20 @@ this.Content = chart; ## 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. - - * [`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. - * [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_FontSize), of type `double`, indicates the font size. - * [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_Stroke), of type `Brush`, indicates the brush used to paint the border of the data label. - * [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_StrokeWidth), of type `double`, indicates the width of the label's border. - * [CornerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_CornerRadius), of type `CornerRadius`, indicates the rounded corner for label. - * [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_TextColor), of type `Color`, indicates the color of the displayed text. +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, 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) - 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 [ChartLabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.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. + * [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_FontSize), of type `double`, indicates the font size. + * [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_Stroke), of type `Brush`, indicates the brush used to paint the border of the data label. + * [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_StrokeWidth), of type `double`, indicates the width of the label's border. + * [CornerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_CornerRadius), of type `CornerRadius`, indicates the rounded corner for label. + * [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_TextColor), of type `Color`, indicates the color of the displayed text. {% tabs %} diff --git a/maui-toolkit/Funnel-Charts/Exporting.md b/maui-toolkit/Funnel-Charts/Exporting.md index 5d3dfd49..e6ad5c04 100644 --- a/maui-toolkit/Funnel-Charts/Exporting.md +++ b/maui-toolkit/Funnel-Charts/Exporting.md @@ -5,44 +5,43 @@ description: Learn here how to export the chart view as an image and stream in t platform: maui-toolkit control: SfFunnelChart documentation: ug +keywords: .net maui funnel chart, export chart as image, save chart image, get chart stream, image formats, export chart view, maui toolkit --- # Exporting in .NET MAUI Chart ## Export as an image -You can export the chart view as an image in the desired file format using the [SaveAsImage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_SaveAsImage_System_String_) method of [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html). The supported image formats are **JPEG and PNG**. By default, i.e., if you didn’t mention any image format with the filename, the chart view will be exported as an image in the PNG format. +You can export the chart view as an image in your desired file format using the [SaveAsImage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_SaveAsImage_System_String_) method of [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html). The supported image formats are **JPEG and PNG**. By default, if you don't specify an image format with the filename, the chart view will be exported as an image in PNG format. -N> 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 be exported as an image only when it is added to the visual tree. -The following code snippet demonstrates the usage of this method: +The following code snippet demonstrates how to use this method: {% tabs %} {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); +// Configure chart properties ... this.Content = chart; -chart.SaveAsImage("ChartSample.jpeg"); // Export the chart view as an image in the JPEG format. +chart.SaveAsImage("ChartSample.jpeg"); // Export the chart view as an image in JPEG format {% endhighlight %} {% 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 simply changing the file extension to .jpg or .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. +- **Windows Phone, Android, and MAC** – The image will be saved in the 'Pictures' directory of the file system. +- **iOS** – The image will be saved in the 'Photos/Album' directory of the file system. -**iOS** – The image will be saved inside the 'Photos/Album' directory of the file system. +For Android and Windows Phone devices, you must enable file writing permissions on the device storage to save images. -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: +For iOS devices, you need to enable permission to access the device storage in the "Info.plist" file. Add the following code snippet to the file: {% tabs %} @@ -63,20 +62,21 @@ Add the following code snippet to the "Info" file: ## 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 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) allows you to asynchronously get the chart view as a stream in your desired ImageFileFormat. This output stream can be passed as 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: +The following code snippet demonstrates how to use this method: {% tabs %} {% highlight c# %} SfFunnelChart chart = new SfFunnelChart(); +// Configure chart properties ... this.Content = chart; -await chart.GetStreamAsync(ImageFileFormat.Jpeg); // Get the chart view as a stream in the JPEG format. +var stream = await chart.GetStreamAsync(ImageFileFormat.Jpeg); // Get the chart view as a stream in JPEG format {% endhighlight %} diff --git a/maui-toolkit/Funnel-Charts/Getting-Started.md b/maui-toolkit/Funnel-Charts/Getting-Started.md index 8d3011d0..9fd32b48 100644 --- a/maui-toolkit/Funnel-Charts/Getting-Started.md +++ b/maui-toolkit/Funnel-Charts/Getting-Started.md @@ -5,6 +5,7 @@ description: Learn here all about getting started with Syncfusion® .NET MAUI Ch platform: maui-toolkit control: SfFunnelChart documentation: ug +keywords: .net maui funnel chart, getting started with funnel chart, chart data binding, chart title, enable data labels, chart legend, tooltips, maui toolkit --- # Getting Started with .NET MAUI Funnel Chart @@ -18,7 +19,7 @@ This section explains how to populate the Funnel Chart with data, including addi 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 @@ -111,7 +112,7 @@ 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) @@ -208,7 +209,7 @@ 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. +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 @@ -330,8 +331,8 @@ public class AdmissionViewModel new AdmissionModel() {XValue = "Enrolled", YValue=175}, new AdmissionModel() {XValue = "Admits", YValue=190}, new AdmissionModel() {XValue = "Applicants", YValue=245}, - new AdmissionModel() {XValue = "Inquiries ", YValue=290}, - new AdmissionModel() {XValue = "Prospects ", YValue=320}, + new AdmissionModel() {XValue = "Inquiries", YValue=290}, + new AdmissionModel() {XValue = "Prospects", YValue=320}, }; } } @@ -386,7 +387,7 @@ public partial class MainPage : ContentPage ### Populate chart with data -Binding `Data` to the funnel chart [ItemsSource](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_ItemsSource) property from its BindingContext to create our own funnel chart. +Bind `Data` to the funnel chart [ItemsSource](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_ItemsSource) property from its BindingContext to create your own funnel chart. {% tabs %} @@ -507,7 +508,7 @@ this.Content = chart; ### Enable Tooltip -Tooltips are used to show information about the segment, when mouse over on it. Enable tooltip by setting the chart [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_EnableTooltip) property as `true`. +Tooltips are used to show information about the segment when mouse hovers over it. Enable tooltip by setting the chart [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_EnableTooltip) property as `true`. {% tabs %} @@ -573,8 +574,9 @@ using Syncfusion.Maui.Toolkit.Charts; . . . public partial class MainPage : ContentPage { - public MainWindow() + public MainPage() { + InitializeComponent(); SfFunnelChart chart = new SfFunnelChart(); chart.Title = new Label() { diff --git a/maui-toolkit/Funnel-Charts/Legend.md b/maui-toolkit/Funnel-Charts/Legend.md index 9cbecdaf..992d1bf2 100644 --- a/maui-toolkit/Funnel-Charts/Legend.md +++ b/maui-toolkit/Funnel-Charts/Legend.md @@ -1,11 +1,11 @@ --- 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. +description: This section explains how to initialize legend and its customization in Syncfusion® .NET MAUI Chart (SfFunnelChart) control. platform: maui-toolkit control: SfFunnelChart documentation: ug -keywords: .net maui funnel chart, funnel-chart, chart legend, legend-wrap, legend view, legend layout, chart legend items, legend alignment. +keywords: .net maui funnel chart, funnel-chart, chart legend, legend-wrap, legend view, legend layout, chart legend items, legend alignment --- # Legend in .NET MAUI Chart (SfFunnelChart) @@ -142,7 +142,7 @@ 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. +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 [ChartLegendIconType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLegendIconType.html) enum values. {% tabs %} @@ -248,13 +248,13 @@ 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. +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 %} @@ -339,7 +339,7 @@ this.Content = chart; ## 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`. +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. @@ -410,6 +410,7 @@ 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. diff --git a/maui-toolkit/Funnel-Charts/Overview.md b/maui-toolkit/Funnel-Charts/Overview.md index b1d5c525..f4e98396 100644 --- a/maui-toolkit/Funnel-Charts/Overview.md +++ b/maui-toolkit/Funnel-Charts/Overview.md @@ -1,20 +1,21 @@ --- 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 +title: About .NET MAUI Funnel Chart Control | Syncfusion +description: Learn about the Syncfusion .NET MAUI Funnel Chart (SfFunnelChart) control, its key features, and capabilities for visualizing process data. platform: maui-toolkit control: SfFunnelChart documentation: ug +keywords: .net maui funnel chart, business funnel visualization, sales process analysis, segment selection, interactive funnel chart, chart customization, chart legends --- # .NET MAUI Funnel Chart Overview -The Syncfusion® Toolkit for .NET MAUI Funnel Chart (`SfFunnelChart`) provides a visually appealing way to represent data across different stages in a process. It is ideal for analyzing business funnels, such as sales processes or conversion rates, in high-quality .NET MAUI applications. +The Syncfusion® .NET MAUI Funnel Chart (SfFunnelChart) provides a visually appealing way to represent data across different stages in a process. It is ideal for analyzing business funnels, such as sales processes or conversion rates, in high-quality .NET MAUI applications. ## Key Features * **User Interaction**: Enhances the end-user experience with interactive features like segment selection and tooltips, allowing users to gain deeper insights into each stage of the funnel. -* **Legends**: Displays legends to provide additional information about each funnel segment. If the legend exceeds the available bounds, it offers scrolling for better navigation. +* **Legends**: Displays legends to provide additional information about each funnel segment. When legends exceed the available bounds, scrolling functionality is provided for better navigation. -* **Customization**: Offers various customization options for features like chart titles, data labels, legends, and segment spacing, ensuring a tailored and visually compelling chart design. \ No newline at end of file +* **Customization**: Offers various customization options for chart elements including titles, data labels, legends, and segment spacing, ensuring a tailored and visually compelling chart design. \ No newline at end of file diff --git a/maui-toolkit/Funnel-Charts/Segment-Spacing.md b/maui-toolkit/Funnel-Charts/Segment-Spacing.md index a71f19ac..9d11e578 100644 --- a/maui-toolkit/Funnel-Charts/Segment-Spacing.md +++ b/maui-toolkit/Funnel-Charts/Segment-Spacing.md @@ -1,35 +1,33 @@ --- 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 how to customize segment spacing in Syncfusion® .NET MAUI Funnel Chart (SfFunnelChart) control and its elements. platform: maui-toolkit control: SfFunnelChart documentation: ug +keywords: .net maui funnel chart, segment spacing, chart customization, gap ratio, funnel chart elements --- -# 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`. +You can customize the gap between segments in the funnel chart by 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 is `0`, and it can range from `0` to `1`. A higher value creates more space between segments. {% tabs %} {% highlight xml %} - . . . - {% endhighlight %} {% highlight c# %} - SfFunnelChart chart = new SfFunnelChart(); . . . -chart.GapRatio = 0.2; // Set gap ratio between funnel segments. +chart.GapRatio = 0.2; // Set gap ratio between funnel segments . . . this.Content = chart; {% endhighlight %} {% endtabs %} -![Segment spacing in MAUI Chart](Segment_Spacing_images/MAUI_spacing_chart.png) +![Segment spacing in MAUI Funnel Chart](Segment_Spacing_images/MAUI_spacing_chart.png) \ No newline at end of file diff --git a/maui-toolkit/Funnel-Charts/Tooltip.md b/maui-toolkit/Funnel-Charts/Tooltip.md index f8b6f76a..4c3087ed 100644 --- a/maui-toolkit/Funnel-Charts/Tooltip.md +++ b/maui-toolkit/Funnel-Charts/Tooltip.md @@ -1,19 +1,20 @@ --- 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 +description: This section explains how to enable tooltips and customize them in the Syncfusion® .NET MAUI Chart (SfFunnelChart) control platform: maui-toolkit control: SfFunnelChart documentation: ug +keywords: .net maui funnel chart, chart tooltip, enable tooltip, tooltip customization, tooltip template, interactive charts --- # Tooltip in .NET MAUI Chart -The tooltip helps in providing additional information while hovering over the funnel segment. By default, the value of the funnel process (Y value) will be shown in the tooltip. +Tooltips provide additional information when hovering over a funnel segment. By default, the value of the funnel process (Y value) is displayed in the tooltip. ## Enable Tooltip -To define the tooltip in the chart, set the [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_EnableTooltip) property of [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html) to true. +To add tooltips to the chart, set the [EnableTooltip](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_EnableTooltip) property of [SfFunnelChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html) to true. {% tabs %} @@ -23,7 +24,6 @@ To define the tooltip in the chart, set the [EnableTooltip](https://help.syncfus . . . - {% endhighlight %} {% highlight c# %} @@ -32,21 +32,26 @@ SfFunnelChart chart = new SfFunnelChart(); . . . chart.EnableTooltip = true; // Enable tooltip for the chart. this.Content = chart; + {% endhighlight %} {% endtabs %} ![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: +## Customize Tooltip + +The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html) is used to customize the tooltip. For customization, 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 available for tooltip customization: -* [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. -* [FontFamily](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontFamily) of type `string`, indicates the font family for the label. -* [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontSize) of type `float`, indicates the font size. -* [Duration](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Duration) of type `int`, indicates the duration for displaying the tooltip. -* [Margin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Margin) of type `Thickness`, indicates the label's margin. -* [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_TextColor) of type `Color`, indicates the color of the displayed text. +* [Background](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Background) - 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) - Defines the font style of the tooltip text. +* [FontFamily](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontFamily) - Specifies the font family for the tooltip text. +* [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontSize) - Sets the font size of the tooltip text. +* [Duration](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Duration) - Determines how long the tooltip remains visible. +* [Margin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Margin) - Sets the margin around the tooltip content. +* [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_TextColor) - Defines the color of the tooltip text. {% tabs %} @@ -74,13 +79,14 @@ chart.TooltipBehavior = new ChartTooltipBehavior() }; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} ## Tooltip Template -[TooltipTemplate](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_TooltipTemplate) is used to show additional information other than the default UI. +The [TooltipTemplate](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfFunnelChart.html#Syncfusion_Maui_Toolkit_Charts_SfFunnelChart_TooltipTemplate) property allows you to create a custom UI for tooltips that can display additional information beyond the default content. {% tabs %} @@ -106,7 +112,7 @@ this.Content = chart; - . . . + . . . @@ -117,11 +123,12 @@ this.Content = chart; SfFunnelChart chart = new SfFunnelChart(); . . . 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. . . . this.Content = chart; + {% endhighlight %} {% endtabs %} -![Tooltip template in MAUI Chart](Tooltip_images/MAUI_chart_tooltip_customization.png) +![Tooltip template in MAUI Chart](Tooltip_images/MAUI_chart_tooltip_customization.png) \ No newline at end of file diff --git a/maui-toolkit/Polar-Charts/Appearance.md b/maui-toolkit/Polar-Charts/Appearance.md index c7c1c668..c28daf34 100644 --- a/maui-toolkit/Polar-Charts/Appearance.md +++ b/maui-toolkit/Polar-Charts/Appearance.md @@ -1,37 +1,35 @@ --- layout: post -title: Appearance in .NET MAUI Chart control Syncfusion -description: Learn here all about appearance customization in Syncfusion® .NET MAUI Chart (SfPolarChart), including its elements, and more. +title: Appearance in .NET MAUI Chart Control | Syncfusion +description: Learn about appearance customization in Syncfusion® .NET MAUI Chart (SfPolarChart), including its elements and more. platform: maui-toolkit control: SfPolarChart documentation: ug +keywords: .net maui polar chart, appearance customization, palette brushes, gradient customization, plotting area customization, chart styling, custom brushes, maui toolkit --- # Appearance in .NET MAUI Polar Chart -The appearance of [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html) can be customized using the predefined brushes, custom brushes, and gradient, which allows for the enrichment of the application. -## Default PaletteBrushes for Chart +The appearance of the [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html) can be customized using predefined brushes, custom brushes, and gradients to enhance the application. -By default, the chart applies a set of predefined brushes to the series in a specific order. The following screenshot displays the default appearance of multiple series. +## Default Palette Brushes for Chart + +By default, the chart applies predefined brushes to the series in a specific order. The following example shows the default appearance of multiple series: {% tabs %} {% highlight xaml %} - - . . . + ... - {% endhighlight %} {% highlight c# %} - // Create a new SfPolarChart instance SfPolarChart chart = new SfPolarChart(); - var viewModel = new ViewModel(); . . . // Define the first PolarLineSeries @@ -65,29 +63,25 @@ chart.Series.Add(series3); // Set the chart as the content of the current page or control this.Content = chart; - {% endhighlight %} {% endtabs %} -![Default PaletteBrushes in MAUI Chart](Appearance_images/MAUI_default_chart.png) +![Default Palette Brushes in MAUI Chart](Appearance_images/MAUI_default_chart.png) -### Custom PaletteBrushes +### Custom Palette Brushes -The [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html) provides support for defining custom brushes for the chart in a preferred order using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_PaletteBrushes) property, as illustrated in the following code example. +The [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html) supports defining custom brushes for the chart using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_PaletteBrushes) property, as shown below: {% tabs %} {% highlight xaml %} - - . . . + ... - {% endhighlight %} {% highlight c# %} - // Create a new instance of SfPolarChart SfPolarChart chart = new SfPolarChart(); @@ -102,97 +96,87 @@ List CustomBrushes = new List() // Set the custom palette brushes for the chart this.chart.PaletteBrushes = CustomBrushes; -// ... (other chart configurations) - // Set the chart as the content of the current view this.Content = chart; - {% endhighlight %} {% endtabs %} -![Custom PaletteBrushes in MAUI Chart](Appearance_images/MAUI_polar_chart_custom_palette.png) +![Custom Palette Brushes in MAUI Chart](Appearance_images/MAUI_polar_chart_custom_palette.png) ## Applying Gradient -The gradient for the chart can be set using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) property with the help of `LinearGradientBrush` or `RadialGradientBrush`. +A gradient can be applied to the chart using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) property with `LinearGradientBrush` or `RadialGradientBrush`. -The following code sample and screenshot illustrates how to apply the gradient brushes for the series using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) property. +The following example demonstrates how to apply gradient brushes to the series: {% tabs %} {% highlight xaml %} - - . . . + ... - {% endhighlight %} {% highlight c# %} - public class ViewModel { - // Collection to hold data for the chart + // Data collection for the chart public ObservableCollection Data { get; set; } - // List to store custom brushes for chart styling + // Custom brushes for chart styling public List CustomBrushes { get; set; } public ViewModel() { CustomBrushes = new List(); - LinearGradientBrush gradientColor1 = new LinearGradientBrush(); // Create and configure gradient brush 1 + LinearGradientBrush gradientColor1 = new LinearGradientBrush(); gradientColor1.GradientStops = new GradientStopCollection() { new GradientStop() { Offset = 1, Color = Color.FromRgb(168, 234, 238) }, new GradientStop() { Offset = 0, Color = Color.FromRgb(123, 176, 249) } }; - LinearGradientBrush gradientColor2 = new LinearGradientBrush(); // Create and configure gradient brush 2 + LinearGradientBrush gradientColor2 = new LinearGradientBrush(); gradientColor2.GradientStops = new GradientStopCollection() { new GradientStop() { Offset = 1, Color = Color.FromRgb(221, 214, 243) }, new GradientStop() { Offset = 0, Color = Color.FromRgb(250, 172, 168) } }; - LinearGradientBrush gradientColor3 = new LinearGradientBrush(); // Create and configure gradient brush 3 + LinearGradientBrush gradientColor3 = new LinearGradientBrush(); gradientColor3.GradientStops = new GradientStopCollection() { new GradientStop() { Offset = 1, Color = Color.FromRgb(255, 231, 199) }, new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 182, 159) } }; - // Add all created gradient brushes to the CustomBrushes list CustomBrushes.Add(gradientColor1); CustomBrushes.Add(gradientColor2); CustomBrushes.Add(gradientColor3); } - // ... (other methods) } - {% endhighlight %} {% endtabs %} ![Gradient in MAUI Chart](Appearance_images/MAUI_polar_chart_gradient.png) -## Plotting Area Customization: +## Plotting Area Customization -[SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html) 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. +[SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html) allows adding any view to the chart plot area to include relevant data, a watermark, or a background gradient. {% tabs %} {% highlight xaml %} - - - {% endhighlight %} {% highlight c# %} // Create a new SfPolarChart instance SfPolarChart chart = new SfPolarChart(); - -// Create an AbsoluteLayout to hold the copyright and watermark AbsoluteLayout absoluteLayout = new AbsoluteLayout(); -// Create a Label for the copyright text -var copyRight = new Label() + +// Create Label for the copyright text +Label copyRight = new Label() { - Text = "Copyright @ 2001 - 2024 Syncfusion Inc", + Text = "Copyright © 2001 - 2024 Syncfusion Inc", FontSize = 18, Opacity = 0.4 }; - AbsoluteLayout.SetLayoutBounds(copyRight, new Rect(1, 1, -1, -1)); AbsoluteLayout.SetLayoutFlags(copyRight, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.PositionProportional); absoluteLayout.Children.Add(copyRight); -// Create a Label for the watermark -var watermark = new Label() +// Create Label for the watermark +Label watermark = new Label() { Text = "CONFIDENTIAL", Rotation = 340, @@ -235,18 +216,16 @@ var watermark = new Label() TextColor = Colors.Gray, Opacity = 0.3 }; - AbsoluteLayout.SetLayoutBounds(watermark, new Rect(0.5, 0.5, -1, -1)); AbsoluteLayout.SetLayoutFlags(watermark, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.PositionProportional); absoluteLayout.Children.Add(watermark); -chart.PlotAreaBackgroundView = absoluteLayout; // Set the AbsoluteLayout as the PlotAreaBackgroundView of the chart +chart.PlotAreaBackgroundView = absoluteLayout; // Set the chart as the content of the current page or view this.Content = chart; - {% endhighlight %} {% endtabs %} -![Watermark in .NET MAUI Charts](Appearance_images/polar_water_mark.png) +![Watermark in .NET MAUI Charts](Appearance_images/polar_water_mark.png) \ No newline at end of file diff --git a/maui-toolkit/Polar-Charts/Axis/Axislabels.md b/maui-toolkit/Polar-Charts/Axis/Axislabels.md index 07f6fae7..73747d5d 100644 --- a/maui-toolkit/Polar-Charts/Axis/Axislabels.md +++ b/maui-toolkit/Polar-Charts/Axis/Axislabels.md @@ -5,6 +5,7 @@ description: Learn here all about axis labels and their customization in the Syn platform: maui-toolkit control: SfPolarChart documentation: ug +keywords: .net maui polar chart, axis labels, label positioning, label customization, edge label visibility, label formatting, axis customization, maui toolkit --- # Axis labels in .NET MAUI Chart @@ -13,9 +14,9 @@ Axis labels are used to display the units, measures, or category values of an ax ## Positioning the labels -The [LabelsPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelsPosition) property is used to position the axis labels inside or outside the chart area. [LabelsPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelsPosition) property default value is `AxisElementPosition.Outside`. +The [LabelsPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelsPosition) property is used to position the axis labels inside or outside the chart area. The default value is `AxisElementPosition.Outside`. -N> This is only applicable to the secondary axis of Polar chart.Maui.Toolkit.Charts +N> This is only applicable to the secondary axis of Polar chart. {% tabs %} @@ -28,7 +29,6 @@ N> This is only applicable to the secondary axis of Polar chart.Maui.Toolkit.Cha - {% endhighlight %} {% highlight c# %} @@ -113,7 +113,7 @@ N> EdgeLabelsDrawingMode and EdgeLabelsVisibilityMode can only be customized for **Always Visible** -The `AlwaysVisible` option in [EdgeLabelsVisibilityMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_EdgeLabelsVisibilityMode) is used to display the edge labels even when the chart area is zoomed state. +The `AlwaysVisible` option in [EdgeLabelsVisibilityMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_EdgeLabelsVisibilityMode) is used to display the edge labels even when the chart area is in zoomed state. {% tabs %} diff --git a/maui-toolkit/Polar-Charts/Axis/Axisline.md b/maui-toolkit/Polar-Charts/Axis/Axisline.md index 3509eaf0..3360eae5 100644 --- a/maui-toolkit/Polar-Charts/Axis/Axisline.md +++ b/maui-toolkit/Polar-Charts/Axis/Axisline.md @@ -2,9 +2,10 @@ layout: post title: Axis line in .NET MAUI Chart control | Syncfusion description: Learn here all about the chart axis line and its customization in the Syncfusion® .NET MAUI Chart (SfPolarChart) control. +documentation: ug platform: maui-toolkit control: SfPolarChart -documentation: ug +keywords: .net maui polar chart, axis line customization, axis line style, axis line offset, axis customization, maui toolkit --- # Axis line in .NET MAUI Chart @@ -24,7 +25,7 @@ N> The customization of axis lines using the AxisLineStyle property can only be - + @@ -48,6 +49,7 @@ secondaryAxis.AxisLineStyle = axisLineStyle; chart.SecondaryAxis = secondaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} @@ -65,7 +67,7 @@ The padding to the axis line is defined by using the [AxisLineOffset](https://he - + @@ -88,6 +90,7 @@ secondaryAxis.AxisLineStyle = axisLineStyle; chart.SecondaryAxis = secondaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/maui-toolkit/Polar-Charts/Axis/Gridlines.md b/maui-toolkit/Polar-Charts/Axis/Gridlines.md index d55a0c70..9aed03b3 100644 --- a/maui-toolkit/Polar-Charts/Axis/Gridlines.md +++ b/maui-toolkit/Polar-Charts/Axis/Gridlines.md @@ -5,6 +5,7 @@ description: Learn here all about the chart axis grid lines and their customizat platform: maui-toolkit control: SfPolarChart documentation: ug +keywords: .net maui polar chart, axis grid lines, major grid lines, minor grid lines, grid line customization, chart customization, maui toolkit --- # Grid Lines in .NET MAUI Chart @@ -41,6 +42,7 @@ NumericalAxis secondaryAxis = new NumericalAxis(); chart.SecondaryAxis = secondaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} @@ -52,6 +54,7 @@ The [MajorGridLineStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion. {% tabs %} {% highlight xaml %} + . . . @@ -86,7 +89,7 @@ doubleCollection.Add(3); doubleCollection.Add(3); NumericalAxis primaryAxis = new NumericalAxis(); -/ Define a new ChartLineStyle for customizing the appearance of the grid lines +// Define a new ChartLineStyle for customizing the appearance of the grid lines ChartLineStyle axisLineStyle = new ChartLineStyle() { Stroke = Colors.Black, @@ -99,13 +102,14 @@ NumericalAxis secondaryAxis = new NumericalAxis(); chart.SecondaryAxis = secondaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} ## Minor Grid Lines -Minor gridlines will be added automatically when the small tick lines is defined and using the [MinorTicksPerInterval](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_MinorTicksPerInterval) property of the chart axis. The visibility of the minor gridlines can be controlled using the [ShowMinorGridLines](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_ShowMinorGridLines) property. The default value of [ShowMinorGridLines](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_ShowMinorGridLines) is `true`. +Minor gridlines will be added automatically when the small tick lines are defined using the [MinorTicksPerInterval](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_MinorTicksPerInterval) property of the chart axis. The visibility of the minor gridlines can be controlled using the [ShowMinorGridLines](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_ShowMinorGridLines) property. The default value of [ShowMinorGridLines](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_ShowMinorGridLines) is `true`. {% tabs %} @@ -129,13 +133,14 @@ Minor gridlines will be added automatically when the small tick lines is defined SfPolarChart chart = new SfPolarChart(); NumericalAxis primaryAxis = new NumericalAxis(); chart.PrimaryAxis = primaryAxis; -chart.SecondaryAxis = new NumericalAxis() +NumericalAxis secondaryAxis = new NumericalAxis() { MinorTicksPerInterval = 3, // Set the number of minor ticks between each interval }; chart.SecondaryAxis = secondaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} @@ -184,7 +189,11 @@ DoubleCollection doubleCollection = new DoubleCollection(); doubleCollection.Add(3); doubleCollection.Add(3); -NumericalAxis secondaryAxis = new NumericalAxis() { MinorTicksPerInterval = 2, ShowMinorGridLines = true; }; +NumericalAxis secondaryAxis = new NumericalAxis() +{ + MinorTicksPerInterval = 2, + ShowMinorGridLines = true +}; // Define the style for the minor grid lines on the secondary axis ChartLineStyle axisLineStyle = new ChartLineStyle() { @@ -196,6 +205,7 @@ secondaryAxis.MinorGridLineStyle = axisLineStyle; // Assign the style to the min chart.SecondaryAxis = secondaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/maui-toolkit/Polar-Charts/Axis/Overview.md b/maui-toolkit/Polar-Charts/Axis/Overview.md index 9243bcbf..d1f64c33 100644 --- a/maui-toolkit/Polar-Charts/Axis/Overview.md +++ b/maui-toolkit/Polar-Charts/Axis/Overview.md @@ -5,20 +5,21 @@ description: Learn here all about the chart axis and its key features in the Syn platform: maui-toolkit control: SfPolarChart documentation: ug +keywords: .net maui polar chart, chart axis, axis types, category axis, numeric axis, datetime axis, axis customization, maui toolkit --- # Axis in .NET MAUI Chart -The [ChartAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html) is used to locate a data point within the chart area. Charts usually consist of two axes, which are used to measure and categorize data: a primary axis and a secondary axis. +The [ChartAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html) is used to locate data points within the chart area. Charts typically consist of two axes to measure and categorize data: a primary axis and a secondary axis. -Polar chart supports the following types of chart axis. +The Polar chart supports the following types of chart axes: * Category * Numeric -* Date time +* DateTime -## Key features +## Key Features -* Axis supports different types of axes such as Category, Numeric, and Date Time. -* It allows you to customize the chart axis line, including grid lines, and tick lines. -* It allows you to customize the start angle of axis. \ No newline at end of file +* Support for different axis types such as Category, Numeric, and DateTime. +* Customization options for chart axis elements including axis lines, grid lines, and tick lines. +* Ability to adjust the start angle of the axis. \ No newline at end of file diff --git a/maui-toolkit/Polar-Charts/Axis/Ticklines.md b/maui-toolkit/Polar-Charts/Axis/Ticklines.md index 84feb15e..b718e0fb 100644 --- a/maui-toolkit/Polar-Charts/Axis/Ticklines.md +++ b/maui-toolkit/Polar-Charts/Axis/Ticklines.md @@ -2,16 +2,17 @@ layout: post title: Axis Tick Line in .NET MAUI Chart Control | Syncfusion description: Learn here all about the chart axis tick lines and their customization in the Syncfusion® .NET MAUI Chart (SfPolarChart) control. +documentation: ug platform: maui-toolkit control: SfPolarChart -documentation: ug +keywords: .net maui polar chart, axis tick lines, tick line customization, major tick lines, minor tick lines, tick positioning, maui toolkit --- # Tick Lines in .NET MAUI Chart -Tick lines are the small lines which is drawn on the axis line representing the axis labels. By default, tick lines are drawn outside of the axis. +Tick lines are small lines drawn on the axis line that represent axis labels. By default, tick lines are drawn outside of the axis. -Minor tick lines can be added to the axis by defining the [MinorTicksPerInterval](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_MinorTicksPerInterval) property. This property will add the minor tick lines to every interval based on value. +Minor tick lines can be added to the axis by defining the [MinorTicksPerInterval](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_MinorTicksPerInterval) property. This property adds minor tick lines to every interval based on the specified value. N> For category axis, minor tick lines are not applicable as it is rendered based on index positions. @@ -36,7 +37,7 @@ N> For category axis, minor tick lines are not applicable as it is rendered base SfPolarChart chart = new SfPolarChart(); . . . -NumericalAxis primaryAxis = new NumericalAxis() +NumericalAxis primaryAxis = new NumericalAxis(); chart.PrimaryAxis = primaryAxis; NumericalAxis secondaryAxis = new NumericalAxis() { @@ -46,13 +47,14 @@ NumericalAxis secondaryAxis = new NumericalAxis() chart.SecondaryAxis = secondaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} -## Positioning the ticks +## Positioning the Ticks -The tick lines can be positioned inside or outside the chart area using the [TickPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_TickPosition) property. [TickPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_TickPosition) property default value is `AxisElementPosition.Outside`. +The tick lines can be positioned inside or outside the chart area using the [TickPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_TickPosition) property. The default value of [TickPosition](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_TickPosition) is `AxisElementPosition.Outside`. N> This is only applicable to the secondary axis of Polar chart. @@ -81,6 +83,7 @@ NumericalAxis secondaryAxis = new NumericalAxis() chart.SecondaryAxis = secondaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} @@ -89,7 +92,7 @@ this.Content = chart; ## Customization -Both major and minor tick lines can be customized using the [MajorTickStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_MajorTickStyle) and [MinorTickStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_MinorTickStyle) properties respectively. They provide options to change the [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisTickStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisTickStyle_StrokeWidth), [TickSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisTickStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisTickStyle_TickSize), [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisTickStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisTickStyle_Stroke) of tick lines. By default, minor tick lines will not be visible. +Both major and minor tick lines can be customized using the [MajorTickStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_MajorTickStyle) and [MinorTickStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.RangeAxisBase.html#Syncfusion_Maui_Toolkit_Charts_RangeAxisBase_MinorTickStyle) properties respectively. They provide options to change the [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisTickStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisTickStyle_StrokeWidth), [TickSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisTickStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisTickStyle_TickSize), and [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxisTickStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartAxisTickStyle_Stroke) of tick lines. By default, minor tick lines are not visible. {% tabs %} @@ -124,17 +127,18 @@ chart.PrimaryAxis = primaryAxis; NumericalAxis secondaryAxis = new NumericalAxis() { - // Define the style for major ticks on the secondary axis + MinorTicksPerInterval = 4, + // Define the style for major ticks on the secondary axis MajorTickStyle = new ChartAxisTickStyle() { - Stroke = Color.Red, + Stroke = Colors.Red, StrokeWidth = 1, TickSize = 10 }, // Define the style for minor ticks on the secondary axis MinorTickStyle = new ChartAxisTickStyle() { - Stroke = Color.Red, + Stroke = Colors.Red, StrokeWidth = 1 } }; @@ -142,6 +146,7 @@ NumericalAxis secondaryAxis = new NumericalAxis() chart.SecondaryAxis = secondaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/maui-toolkit/Polar-Charts/Axis/Title.md b/maui-toolkit/Polar-Charts/Axis/Title.md index 0d66d93a..298b5264 100644 --- a/maui-toolkit/Polar-Charts/Axis/Title.md +++ b/maui-toolkit/Polar-Charts/Axis/Title.md @@ -5,9 +5,10 @@ description: Learn here all about chart axis title, title style, title template, platform: maui-toolkit control: SfPolarChart documentation: ug +keywords: .net maui polar chart, axis title, title customization, label extent, axis label-to-title gap, axis title style, maui toolkit --- -# Axis Title in MAUI Chart +# Axis Title in .NET MAUI Chart The [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_Title) property is used to set the title for the chart axis. @@ -55,7 +56,7 @@ this.Content = chart; ## Customization -The [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_Title) property in axis provides options to customize the text and font of the axis title. The axis does not display the title by default. The title can be customized using following properties, +The [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_Title) property in axis provides options to customize the text and font of the axis title. The axis does not display the title by default. The title can be customized using the following properties: * `Text` - Gets or sets the title for axis. * `Background` - Gets or sets the background color of the labels. @@ -68,9 +69,9 @@ The [Title](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit. * `StrokeWidth` - Gets or sets the border thickness of the label. * `TextColor` - Gets or sets the color for the text of the label. -## Label extent +## Label Extent -The [LabelExtent](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelExtent) property allows you to set the gap between axis labels and the title. This is typically used to maintain the fixed gap between axis labels and title when the digits of the axis value changed in live update. +The [LabelExtent](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_LabelExtent) property allows you to set the gap between axis labels and the title. This is typically used to maintain a fixed gap between axis labels and title when the digits of the axis value change in live updates. {% tabs %} diff --git a/maui-toolkit/Polar-Charts/Axis/Types.md b/maui-toolkit/Polar-Charts/Axis/Types.md index b7aaa3de..2b913968 100644 --- a/maui-toolkit/Polar-Charts/Axis/Types.md +++ b/maui-toolkit/Polar-Charts/Axis/Types.md @@ -5,11 +5,12 @@ description: Learn here all about axis types and their features in Syncfusion® platform: maui-toolkit control: SfPolarChart documentation: ug +keywords: .net maui polar chart, axis types, numerical axis, category axis, datetime axis, axis customization, maui toolkit --- # Types of Axis in .NET MAUI Chart -Polar chart supports the following types of chart axis. +Polar chart supports the following types of chart axis: * NumericalAxis * CategoryAxis @@ -48,7 +49,8 @@ chart.PrimaryAxis = primaryAxis; // Set the primary axis of the chart to the new NumericalAxis secondaryAxis = new NumericalAxis(); chart.SecondaryAxis = secondaryAxis; // Set the secondary axis of the chart to the newly created NumericalAxis . . . - this.Content = chart; +this.Content = chart; + {% endhighlight %} {% endtabs %} @@ -90,15 +92,16 @@ NumericalAxis secondaryAxis = new NumericalAxis(); chart.SecondaryAxis = secondaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} ### Customizing the Range -[Maximum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html#Syncfusion_Maui_Toolkit_Charts_NumericalAxis_Maximum) and [Minimum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html#Syncfusion_Maui_Toolkit_Charts_NumericalAxis_Minimum) properties of axis is used for setting the maximum and minimum value of the axis range respectively. +[Maximum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html#Syncfusion_Maui_Toolkit_Charts_NumericalAxis_Maximum) and [Minimum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html#Syncfusion_Maui_Toolkit_Charts_NumericalAxis_Minimum) properties of axis are used for setting the maximum and minimum values of the axis range respectively. -N> If minimum or maximum value is set, the other value is calculated by default internally. +N> If minimum or maximum value is set, the other value is calculated by default internally. {% tabs %} @@ -124,13 +127,14 @@ NumericalAxis secondaryAxis = new NumericalAxis() chart.SecondaryAxis = secondaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} ## Category Axis -The [CategoryAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html) is an indexed based axis that plots values based on the index of the data point collection. The points are equally spaced here. +The [CategoryAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html) is an index-based axis that plots values based on the index of the data point collection. The points are equally spaced here. {% tabs %} @@ -151,10 +155,11 @@ SfPolarChart chart = new SfPolarChart(); . . . // Initialize a CategoryAxis for the primary axis of the Polar Chart CategoryAxis primaryAxis = new CategoryAxis(); -// Assign the created CategoryAxis to the PrimaryAxis property of the chart. +// Assign the created CategoryAxis to the PrimaryAxis property of the chart chart.PrimaryAxis = primaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} @@ -163,7 +168,7 @@ this.Content = chart; ### Interval -By default, the [CategoryAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html) axis labels are display with fixed interval 1. It can customized by using the [Interval](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html#Syncfusion_Maui_Toolkit_Charts_CategoryAxis_Interval) property of axis. +By default, the [CategoryAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html) axis labels are displayed with fixed interval 1. This can be customized by using the [Interval](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.CategoryAxis.html#Syncfusion_Maui_Toolkit_Charts_CategoryAxis_Interval) property of axis. {% tabs %} @@ -196,6 +201,7 @@ NumericalAxis secondaryAxis = new NumericalAxis(); chart.SecondaryAxis = secondaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} @@ -227,6 +233,7 @@ DateTimeAxis primaryAxis = new DateTimeAxis(); chart.PrimaryAxis = primaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} @@ -269,13 +276,14 @@ NumericalAxis secondaryAxis = new NumericalAxis(); chart.SecondaryAxis = secondaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} ### Customizing the Range -[Minimum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html#Syncfusion_Maui_Toolkit_Charts_DateTimeAxis_Minimum) and [Maximum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html#Syncfusion_Maui_Toolkit_Charts_DateTimeAxis_Maximum) properties behavior is same as in [NumericalAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html) instead of setting numerical value, have to set date time values. +[Minimum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html#Syncfusion_Maui_Toolkit_Charts_DateTimeAxis_Minimum) and [Maximum](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html#Syncfusion_Maui_Toolkit_Charts_DateTimeAxis_Maximum) properties behavior is same as in [NumericalAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.NumericalAxis.html) except that instead of setting numerical values, you have to set date time values. {% tabs %} @@ -303,6 +311,7 @@ DateTimeAxis primaryAxis = new DateTimeAxis() chart.PrimaryAxis = primaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} @@ -329,10 +338,11 @@ Axis can be inverted using the [IsInversed](https://help.syncfusion.com/cr/maui- SfPolarChart chart = new SfPolarChart(); . . . NumericalAxis secondaryAxis = new NumericalAxis(); -secondaryAxis.IsInversed = true; // Set the IsInversed property to true to reverse the axis direction. +secondaryAxis.IsInversed = true; // Set the IsInversed property to true to reverse the axis direction chart.SecondaryAxis = secondaryAxis; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} diff --git a/maui-toolkit/Polar-Charts/DataLabels.md b/maui-toolkit/Polar-Charts/DataLabels.md index 246c2443..53fb1776 100644 --- a/maui-toolkit/Polar-Charts/DataLabels.md +++ b/maui-toolkit/Polar-Charts/DataLabels.md @@ -1,31 +1,35 @@ --- layout: post title: Data Labels in .NET MAUI Chart Control | Syncfusion -description: Learn here all about how to configure the data labels and their features in Syncfusion® .NET MAUI Chart (SfPolarChart). +description: Learn about configuring data labels and their features in Syncfusion® .NET MAUI Chart (SfPolarChart). platform: maui-toolkit control: SfPolarChart documentation: ug +keywords: .net maui polar chart, data labels, label customization, enabling data labels, series brush application, label formatting, label template, maui toolkit + --- # Data Labels in .NET MAUI Chart -Data labels are used to display values related to a chart segment. Values from a data point(x, y) or other custom properties from a data source can be displayed. +Data labels display values related to a chart segment. They can show values from a data point (x, y) or other custom properties from a data source. -Each data label can be represented by the following: +Each data label includes the following: -* Label - displays the segment label content at the (X, Y) point. +* Label - Displays the segment label content at the (X, Y) point. ## 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 a 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 a series enables the data labels. {% tabs %} {% highlight xaml %} - . . . - + @@ -35,7 +39,7 @@ The [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui // Create a new instance of SfPolarChart SfPolarChart chart = new SfPolarChart(); -. . . +// Other chart settings // Create a new PolarLineSeries PolarLineSeries series = new PolarLineSeries() { @@ -55,24 +59,24 @@ this.Content = chart; ![Data label in MAUI chart](DataLabel_images/MAUI_polar_line_datalabel.png) -Data labels can be customized using the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarSeries.html#Syncfusion_Maui_Toolkit_Charts_PolarSeries_DataLabelSettings) property of chart series. To customize them, you need to create an instance of [PolarDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarDataLabelSettings.html) and set it to the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarSeries.html#Syncfusion_Maui_Toolkit_Charts_PolarSeries_DataLabelSettings) property. The following properties available in [PolarDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarDataLabelSettings.html) can be used to customize the data labels. +Data labels can be customized using the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarSeries.html#Syncfusion_Maui_Toolkit_Charts_PolarSeries_DataLabelSettings) property of chart series. To customize them, create an instance of [PolarDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarDataLabelSettings.html) and set it to the DataLabelSettings property. The following properties are available in PolarDataLabelSettings for customization: -* [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelStyle) - Gets or sets the options for customizing the data labels. -* [UseSeriesPalette](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) - Gets or sets a value indicating whether the data label should reflect the series interior. +* [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelStyle) - Customizes data labels. +* [UseSeriesPalette](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) - Indicates whether the data label should reflect the series interior. ## 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 marker background. +The [UseSeriesPalette](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_UseSeriesPalette) property sets the series interior as the data marker background. {% tabs %} {% highlight xaml %} - . . . + - + @@ -86,13 +90,11 @@ SfPolarChart chart = new SfPolarChart(); // Create a new instance of PolarLineSeries PolarLineSeries series = new PolarLineSeries(); -. . . - +// Other series settings // Configure the data label settings for the series series.DataLabelSettings = new PolarDataLabelSettings() { // Disable the use of series palette for data labels - // This means data labels won't automatically use the series color UseSeriesPalette = false }; @@ -100,26 +102,29 @@ series.DataLabelSettings = new PolarDataLabelSettings() chart.Series.Add(series); this.Content = chart; + {% endhighlight %} {% endtabs %} -## Formatting Label Context +## Formatting Label Content -The content of the label can be customized using the [LabelContext](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelContext.html) property. Following are the two options that are supported now, +Customize the label content using the [LabelContext](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.LabelContext.html) property. The supported options are: -* [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. +* [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 %} - . . . - + + {% endhighlight %} @@ -128,7 +133,7 @@ The content of the label can be customized using the [LabelContext](https://help // Create a new instance of SfPolarChart SfPolarChart chart = new SfPolarChart(); -. . . +// Other chart settings // Create a new PolarAreaSeries PolarAreaSeries series = new PolarAreaSeries() { @@ -141,7 +146,7 @@ PolarAreaSeries series = new PolarAreaSeries() chart.Series.Add(series); this.Content = chart; - + {% endhighlight %} {% endtabs %} @@ -150,23 +155,23 @@ this.Content = chart; ## LabelTemplate -The [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html) provides support to customize the appearance of the data labels using the [LabelTemplate](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_LabelTemplate) property. +The [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html) allows customizing the appearance of data labels using the [LabelTemplate](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_LabelTemplate) property. {% tabs %} {% highlight xaml %} - + - - . . . - + @@ -176,7 +181,7 @@ The [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.T // Create a new SfPolarChart instance SfPolarChart chart = new SfPolarChart(); -. . . +// Other chart settings // Create a new PolarAreaSeries PolarAreaSeries series = new PolarAreaSeries(); series.ItemsSource = new ViewModel().Data; @@ -190,18 +195,19 @@ DataTemplate labelTemplate = new DataTemplate(() => var image = new Image { Source = "arrow.png", - WidthRequest = 15, - HeightRequest = 15 + WidthRequest = 15, + HeightRequest = 15 }; - + return image; }); series.LabelTemplate = labelTemplate; // Assign the custom template to the series' LabelTemplate chart.Series.Add(series); this.Content = chart; - + {% endhighlight %} {% endtabs %} + ![Data label in MAUI chart](DataLabel_images/MAUI_polar_datalabel_template.png) \ No newline at end of file diff --git a/maui-toolkit/Polar-Charts/Exporting.md b/maui-toolkit/Polar-Charts/Exporting.md index cf01bb4e..0112dafb 100644 --- a/maui-toolkit/Polar-Charts/Exporting.md +++ b/maui-toolkit/Polar-Charts/Exporting.md @@ -5,22 +5,22 @@ description: Learn here how to export the chart view as an image and stream in t platform: maui-toolkit control: SfPolarChart documentation: ug +keywords: .net maui polar chart, export chart as image, export chart as stream, image formats, save chart image, get chart stream, maui toolkit --- # Exporting in .NET MAUI Chart ## Export as an image -You can export the chart view as an image in the desired file format using the [SaveAsImage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_SaveAsImage_System_String_) method of [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html). The supported image formats are **JPEG and PNG**. By default, if you don't mention any image format with the filename, the chart view will be exported as an image in the PNG format. +You can export the chart view as an image in your desired file format using the [SaveAsImage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_SaveAsImage_System_String_) method of [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html). The supported image formats are **JPEG and PNG**. By default, if you don't specify any image format with the filename, the chart view will be exported as an image in PNG format. -N> 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 be exported as an image only when it has been added to the visual tree. The following code sample demonstrates the usage of this method: {% tabs %} {% highlight c# %} - // Create a new instance of SfPolarChart SfPolarChart chart = new SfPolarChart(); @@ -29,56 +29,51 @@ SfPolarChart chart = new SfPolarChart(); // Set the chart as the content of the current page or control this.Content = chart; -// Dynamically save the chart as an image file named "ChartSample.jpeg" +// Export the chart as a JPEG image file named "ChartSample.jpeg" chart.SaveAsImage("ChartSample.jpeg"); - {% endhighlight %} {% endtabs %} -T> We can change the image formats in the above code by changing their extensions to .jpg or .png. +T> You can change the image format by changing the file extension to .jpg or .png in the filename parameter. -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. +- **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 images 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 on the device storage. +To save images 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" file: +Add the following code snippet to the "Info.plist" file: {% tabs %} {% highlight xaml %} - ... NSPhotoLibraryUsageDescription - This App needs permission to access the Photos + This app needs permission to access the Photos NSPhotoLibraryAddUsageDescription - This App needs permission to access the Photos + This app needs permission to access the Photos ... - {% endhighlight %} {% endtabs %} ## 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 [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.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 [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.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 sample demonstrates the usage of this method: {% tabs %} {% highlight c# %} - // Create a new instance of SfPolarChart SfPolarChart chart = new SfPolarChart(); @@ -88,8 +83,9 @@ SfPolarChart chart = new SfPolarChart(); this.Content = chart; // Export the chart as a JPEG image stream asynchronously -await chart.GetStreamAsync(ImageFileFormat.Jpeg); +var stream = await chart.GetStreamAsync(ImageFileFormat.Jpeg); +// Now you can use this stream with other components like PDF, Excel, etc. {% endhighlight %} -{% endtabs %} +{% endtabs %} \ No newline at end of file diff --git a/maui-toolkit/Polar-Charts/Getting-Started.md b/maui-toolkit/Polar-Charts/Getting-Started.md index 153b043c..7859a35e 100644 --- a/maui-toolkit/Polar-Charts/Getting-Started.md +++ b/maui-toolkit/Polar-Charts/Getting-Started.md @@ -5,6 +5,7 @@ description: This section explains about the getting started with Syncfusion® . platform: maui-toolkit control: SfPolarChart documentation: ug +keywords: .net maui polar chart, chart axis, chart series, chart title, data labels, chart legend, tooltip, markers, maui toolkit --- # Getting Started with .NET MAUI Polar Chart @@ -18,18 +19,18 @@ This section explains how to populate the Polar Chart with data, including addin 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. @@ -114,16 +115,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 @@ -206,6 +207,7 @@ public partial class MainPage : ContentPage {% endtabs %} {% endtabcontent %} + {% tabcontent JetBrains Rider %} ## Prerequisites @@ -213,18 +215,18 @@ 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` @@ -456,7 +458,7 @@ this.Content = chart; ### Populate Chart with data -To create a polar chart, you can add a [PolarLineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarLineSeries.html) to the polar chart [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_Series) property of the chart, and then bind the `PlantData` property of the above `ViewModel` to the `PolarLineSeries.ItemsSource` as follows. +To create a polar chart, you can add a [PolarLineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarLineSeries.html) to the polar chart [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_Series) property of the chart, and then bind the `PlantData` property of the above `ViewModel` to the `PolarLineSeries.ItemsSource` as follows. N> In order 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.XYDataSeries.html#Syncfusion_Maui_Toolkit_Charts_XYDataSeries_YBindingPath) properties need to be configured correctly. These properties allow the chart to retrieve values from the corresponding properties in the data model. @@ -553,7 +555,7 @@ SfPolarChart chart = new SfPolarChart(); chart.Title = new Label() { Text = "Plant Analysis", // Specify the title text - HorizontalTextAlignment = "Center" + HorizontalTextAlignment = TextAlignment.Center }; // ... (Additional chart configuration code would go here) @@ -691,49 +693,41 @@ this.Content = chart; {% endhighlight %} -{% endtabs %} +{% endtabs %} ### Enable tooltip Tooltips are used to display information about a segment when a user hovers over it. Enable the tooltip 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 %} - {% highlight xaml %} - ... ... - {% endhighlight %} {% highlight C# %} - // Create a new instance of SfPolarChart SfPolarChart chart = new SfPolarChart(); // Create a new instance of PolarLineSeries PolarLineSeries series = new PolarLineSeries(); -series1.EnableTooltip = true; // Enable tooltips for the series +series.EnableTooltip = true; // Enable tooltips for the series // ... (other series configuration) chart.Series.Add(series); this.Content = chart; - {% endhighlight %} - {% endtabs %} The following code example gives you the complete code of above configurations. {% tabs %} - {% highlight xaml %} - - + @@ -771,11 +765,9 @@ The following code example gives you the complete code of above configurations. YBindingPath="Flower" Label="Flower" EnableTooltip="True" ShowDataLabels="True"/> - {% endhighlight %} {% highlight C# %} - using Syncfusion.Maui.Toolkit.Charts; namespace ChartGettingStarted @@ -793,7 +785,7 @@ namespace ChartGettingStarted chart.Title = new Label() { Text = "Plant Analysis", - HorizontalTextAlignment = "Center" + HorizontalTextAlignment = TextAlignment.Center }; // Create and set the primary axis (CategoryAxis) @@ -803,30 +795,30 @@ namespace ChartGettingStarted // Create and set the secondary axis (NumericalAxis) NumericalAxis secondaryAxis = new NumericalAxis() { - Maximum="100" + Maximum = 100 }; chart.SecondaryAxis = secondaryAxis; // Create the first PolarLineSeries for Tree data - PolarLineSeries series1 = new PolarLineSeries() + PolarLineSeries series1 = new PolarLineSeries() { ItemsSource = (new PlantViewModel()).PlantDetails, XBindingPath = "Direction", YBindingPath = "Tree", Label = "Tree", EnableTooltip = true, - ShowDataLabels= true + ShowDataLabels = true }; // Create the second PolarLineSeries for Weed data - PolarLineSeries series2 = new PolarLineSeries() + PolarLineSeries series2 = new PolarLineSeries() { ItemsSource = (new PlantViewModel()).PlantDetails, XBindingPath = "Direction", YBindingPath = "Weed", Label = "Weed", EnableTooltip = true, - ShowDataLabels = true, + ShowDataLabels = true }; // Create the third PolarLineSeries for Flower data @@ -837,7 +829,7 @@ namespace ChartGettingStarted YBindingPath = "Flower", Label = "Flower", EnableTooltip = true, - ShowDataLabels = true, + ShowDataLabels = true }; // Add all series to the chart @@ -850,10 +842,7 @@ namespace ChartGettingStarted } } } - - {% endhighlight %} - {% endtabs %} The following chart is created as a result of the previous codes. diff --git a/maui-toolkit/Polar-Charts/Legend.md b/maui-toolkit/Polar-Charts/Legend.md index 28065e14..62a080db 100644 --- a/maui-toolkit/Polar-Charts/Legend.md +++ b/maui-toolkit/Polar-Charts/Legend.md @@ -5,7 +5,7 @@ description: This section explains about how to initialize legend and its custom platform: maui-toolkit control: SfPolarChart documentation: ug -keywords: .net maui polar chart, polar-chart, chart legend, legend-wrap, legend view, legend layout, chart legend items, legend alignment. +keywords: .net maui polar chart, polar-chart, chart legend, legend-wrap, legend view, legend layout, chart legend items, legend alignment, maui toolkit. --- # Legend in .NET MAUI Chart (SfPolarChart) @@ -26,7 +26,6 @@ To define the legend in the chart, initialize the [ChartLegend](https://help.syn . . . - {% endhighlight %} {% highlight c# %} @@ -54,7 +53,7 @@ The visibility of the chart legend can be controlled using the [IsVisible](https ... - + ... @@ -90,8 +89,8 @@ The visibility of individual legend items for specific series can be controlled - - @@ -293,8 +292,8 @@ The visibility of polar series can be controlled by tapping the legend item usin - - {% endhighlight %} {% highlight c# %} @@ -376,7 +374,6 @@ SfPolarChart chart = new SfPolarChart(); // Set the chart's legend to use the custom LegendExt class chart.Legend = new LegendExt(); - {% endhighlight %} {% endtabs %} @@ -393,15 +390,15 @@ An [ItemsLayout](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Too - - + + - @@ -445,22 +442,21 @@ 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`. +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. - {% tabs %} {% highlight xaml %} - + + Fill="{Binding IconBrush}"/> @@ -472,7 +468,7 @@ N> The BindingContext of the template is the corresponding underlying legend ite - @@ -485,7 +481,6 @@ N> The BindingContext of the template is the corresponding underlying legend ite {% endhighlight %} - {% highlight c# %} // Create a new instance of SfPolarChart @@ -515,22 +510,22 @@ 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). - -* [`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. -* [`FontFamily`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_FontFamily) - used to get or set the font family for the legend label. -* [`FontAttributes`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_FontAttributes) - used to get or set the font style for the legend label. -* [`FontSize`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_FontSize) - used to get or set the font size for the legend label. -* [`TextMargin`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_TextMargin) - used to get or set the margin size of labels. -* [`IconBrush`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconBrush) - used to change the color of the legend icon. -* [`IconType`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconType) - used to get or set the icon type for the legend icon. -* [`IconHeight`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconHeight) - used to get or set the icon height of the legend icon. -* [`IconWidth`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconWidth) - used to get or set the icon width of the legend icon. -* [`IsToggled`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IsToggled) - used to get or set the toggle visibility of the legend. -* [`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 series for the legend item. +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. +* [FontFamily](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_FontFamily) - used to get or set the font family for the legend label. +* [FontAttributes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_FontAttributes) - used to get or set the font style for the legend label. +* [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_FontSize) - used to get or set the font size for the legend label. +* [TextMargin](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_TextMargin) - used to get or set the margin size of labels. +* [IconBrush](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconBrush) - used to change the color of the legend icon. +* [IconType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconType) - used to get or set the icon type for the legend icon. +* [IconHeight](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconHeight) - used to get or set the icon height of the legend icon. +* [IconWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IconWidth) - used to get or set the icon width of the legend icon. +* [IsToggled](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.ILegendItem.html#Syncfusion_Maui_Toolkit_ILegendItem_IsToggled) - used to get or set the toggle visibility of the legend. +* [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 series for the legend item. ## Limitations * Do not add items explicitly. diff --git a/maui-toolkit/Polar-Charts/Overview.md b/maui-toolkit/Polar-Charts/Overview.md index de7d3cf3..50f991a9 100644 --- a/maui-toolkit/Polar-Charts/Overview.md +++ b/maui-toolkit/Polar-Charts/Overview.md @@ -5,11 +5,12 @@ description: Learn here all about the introduction of Syncfusion® .NET MAUI Cha platform: maui-toolkit control: SfPolarChart documentation: ug +keywords: .net maui polar chart, polar chart overview, chart types, multi-series chart, axis customization, gridline customization, maui toolkit --- # .NET MAUI Polar Chart Overview -The Syncfusion® Toolkit for .NET MAUI Polar Chart (`SfPolarChart`) enables the creation of visually compelling polar series charts, often referred to as star, radar, spider web, or cobweb charts. This chart type is ideal for representing data in terms of values and angles, making it perfect for high-quality data visualization applications. +The Syncfusion® Toolkit for .NET MAUI Polar Chart ([SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html)) enables the creation of visually compelling polar series charts, often referred to as star, radar, spider web, or cobweb charts. This chart type is ideal for representing data in terms of values and angles, making it perfect for high-quality data visualization applications. ## Key Features @@ -17,8 +18,8 @@ The Syncfusion® Toolkit for .NET MAUI Polar Chart (`SfPolarChart`) enables the * **Multi-Series Support**: Allows the concurrent rendering of multiple series, enabling users to compare and visualize different data sets side-by-side. -* **Axis Customization**: Offers the ability to adjust rendering positions by rotating the polar axis to different angles, such as 0, 90, 180, and 270 degrees, for better data visualization. +* **Axis Customization**: Offers the ability to adjust rendering positions by rotating the polar axis to different angles, such as 0°, 90°, 180°, and 270°, for better data visualization. * **Gridline Customization**: Provides the option to customize gridlines as either circular or polygonal shapes, depending on whether you're working with a polar or radar chart. -* **User-Friendly Customization**: Offers extensive customization for chart elements such as axis, titles, data labels, markers, and tooltips to create personalized and visually striking charts. \ No newline at end of file +* **User-Friendly Customization**: Offers extensive customization for chart elements such as axes, titles, data labels, markers, and tooltips to create personalized and visually striking charts. \ No newline at end of file diff --git a/maui-toolkit/Polar-Charts/PolarArea.md b/maui-toolkit/Polar-Charts/PolarArea.md index 2bc90ab2..4d99dc92 100644 --- a/maui-toolkit/Polar-Charts/PolarArea.md +++ b/maui-toolkit/Polar-Charts/PolarArea.md @@ -5,6 +5,7 @@ description: Learn here all about the Polar area chart type and its features in platform: maui-toolkit control: SfPolarChart documentation: ug +keywords: .net maui polar chart, polar area chart, polar series, grid line type, closed series, marker customization, maui toolkit --- # Polar Area Chart in .NET MAUI Chart @@ -60,9 +61,9 @@ this.Content = chart; ![Polar area chart type in MAUI Chart](Chart-types_images/MAUI_polar_area_chart.png) -## Grid line Type +## Grid Line Type -The [GridLineType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_GridLineType) property used to customize the rendering style of axis grid lines. The default [GridLineType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_GridLineType) is [Circle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarChartGridLineType.html#Syncfusion_Maui_Toolkit_Charts_PolarChartGridLineType_Circle). Switching to the [Polygon](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarChartGridLineType.html#Syncfusion_Maui_Toolkit_Charts_PolarChartGridLineType_Polygon) grid line type transforms the polar chart appearance, resembling a spider, or web chart. +The [GridLineType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_GridLineType) property is used to customize the rendering style of axis grid lines. The default [GridLineType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_GridLineType) is [Circle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarChartGridLineType.html#Syncfusion_Maui_Toolkit_Charts_PolarChartGridLineType_Circle). Switching to the [Polygon](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarChartGridLineType.html#Syncfusion_Maui_Toolkit_Charts_PolarChartGridLineType_Polygon) grid line type transforms the polar chart appearance, resembling a spider or web chart. {% tabs %} @@ -105,7 +106,7 @@ this.Content = chart; ## Closed Series -The [IsClosed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarSeries.html#Syncfusion_Maui_Toolkit_Charts_PolarSeries_IsClosed) property is used to render the series with or without closed path. The default value of [IsClosed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarSeries.html#Syncfusion_Maui_Toolkit_Charts_PolarSeries_IsClosed) is `true`. +The [IsClosed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarSeries.html#Syncfusion_Maui_Toolkit_Charts_PolarSeries_IsClosed) property is used to render the series with or without a closed path. The default value of [IsClosed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarSeries.html#Syncfusion_Maui_Toolkit_Charts_PolarSeries_IsClosed) is `true`. {% tabs %} @@ -135,7 +136,7 @@ PolarAreaSeries series = new PolarAreaSeries() // Set whether the series should be closed or open // False means the series will not be closed (no line connecting start and end points) - IsClosed = "False" + IsClosed = false }; // Add the series to the chart's Series collection @@ -222,11 +223,11 @@ SfPolarChart chart = new SfPolarChart(); ... // Create and configure chart marker settings -ChartMarkerSettings chartMarker= new ChartMarkerSettings(); +ChartMarkerSettings chartMarker = new ChartMarkerSettings(); chartMarker.Type = ShapeType.Diamond; // Set marker shape to diamond chartMarker.Fill = Colors.Brown; // Set fill color of markers chartMarker.Stroke = Colors.Black; // Set outline color of markers -chartMarker.StrokeWidth= 1; // Set outline width of markers +chartMarker.StrokeWidth = 1; // Set outline width of markers chartMarker.Height = 8; // Set height of markers chartMarker.Width = 8; // Set width of markers diff --git a/maui-toolkit/Polar-Charts/PolarLine.md b/maui-toolkit/Polar-Charts/PolarLine.md index 0f752ad1..ab202d7f 100644 --- a/maui-toolkit/Polar-Charts/PolarLine.md +++ b/maui-toolkit/Polar-Charts/PolarLine.md @@ -5,13 +5,14 @@ description: Learn here all about the Polar line chart type and its features in platform: maui-toolkit control: SfPolarChart documentation: ug +keywords: .net maui polar chart, polar line chart, polar series, grid line type, closed series, marker customization, maui toolkit --- # Polar Line Chart in .NET MAUI Chart ## Polar Line Chart -To display a line series in a polar chart, instantiate the [PolarLineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarLineSeries.html) and include it in the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_Series) collection property of [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html). +To display a line series in a polar chart, instantiate the [PolarLineSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarLineSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_Series) collection property of [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html). {% tabs %} @@ -62,9 +63,9 @@ this.Content = chart; ![Polar line chart type in MAUI Chart](Chart-types_images/MAUI_polar_line_chart.png) -## Grid line Type +## Grid Line Type -The [GridLineType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_GridLineType) property used to customize the rendering style of axis grid lines. The default [GridLineType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_GridLineType) is [Circle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarChartGridLineType.html#Syncfusion_Maui_Toolkit_Charts_PolarChartGridLineType_Circle). Switching to the [Polygon](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarChartGridLineType.html#Syncfusion_Maui_Toolkit_Charts_PolarChartGridLineType_Polygon) grid line type transforms the polar chart appearance, resembling a spider or web chart. +The [GridLineType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_GridLineType) property is used to customize the rendering style of axis grid lines. The default value is [Circle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarChartGridLineType.html#Syncfusion_Maui_Toolkit_Charts_PolarChartGridLineType_Circle). Switching to the [Polygon](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarChartGridLineType.html#Syncfusion_Maui_Toolkit_Charts_PolarChartGridLineType_Polygon) grid line type transforms the polar chart appearance, resembling a spider or web chart. {% tabs %} @@ -107,7 +108,7 @@ this.Content = chart; ## Closed Series -The [IsClosed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarSeries.html#Syncfusion_Maui_Toolkit_Charts_PolarSeries_IsClosed) property is used to render the series with or without closed path. The default value of [IsClosed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarSeries.html#Syncfusion_Maui_Toolkit_Charts_PolarSeries_IsClosed) is `true`. +The [IsClosed](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarSeries.html#Syncfusion_Maui_Toolkit_Charts_PolarSeries_IsClosed) property determines whether the series renders with a closed path. The default value is `true`. {% tabs %} @@ -135,7 +136,7 @@ PolarLineSeries series = new PolarLineSeries() YBindingPath = "Tree", // Set whether the line series should be closed or open // False means the start and end points won't be connected - IsClosed = "False" + IsClosed = false }; // Add the series to the chart's Series collection @@ -150,7 +151,7 @@ this.Content = chart; ## Enable Marker -A marker, also known as a symbol, is used to determine or highlight the position of the data point. To enable markers in the series, set the [ShowMarkers](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarSeries.html#Syncfusion_Maui_Toolkit_Charts_PolarSeries_ShowMarkers) property to true. +A marker (or symbol) highlights the position of data points. To enable markers in a series, set the [ShowMarkers](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarSeries.html#Syncfusion_Maui_Toolkit_Charts_PolarSeries_ShowMarkers) property to true. {% tabs %} @@ -187,16 +188,16 @@ this.Content = chart; {% endtabs %} -### Marker customization +### Marker Customization -In order to change the series markers appearance, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarSeries.html#Syncfusion_Maui_Toolkit_Charts_PolarSeries_MarkerSettings) property. The following properties are used to customize marker appearance. +To change the marker appearance, create an instance of the [MarkerSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PolarSeries.html#Syncfusion_Maui_Toolkit_Charts_PolarSeries_MarkerSettings) property. The following properties are used to customize marker appearance: -* [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Type), of type `ShapeType`, describes the shape of the series marker. The default value of this property is `ShapeType.Circle`. -* [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Stroke), of type `Brush`, indicates the brush used to paint the marker border. -* [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_StrokeWidth), of type `double`, indicates the width of the marker border. -* [Fill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Fill), of type `Brush`, indicates the color of the marker. -* [Width](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Width), of type `double`, indicates the width of the marker. -* [Height](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Height), of type `double`, indicates the height of the marker. +* [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Type) - Specifies the shape of the marker (default is `ShapeType.Circle`). +* [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Stroke) - Defines the brush used for the marker border. +* [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_StrokeWidth) - Sets the width of the marker border. +* [Fill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Fill) - Specifies the color of the marker. +* [Width](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Width) - Sets the width of the marker. +* [Height](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartMarkerSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartMarkerSettings_Height) - Sets the height of the marker. {% tabs %} diff --git a/maui-toolkit/Polar-Charts/RenderingPosition.md b/maui-toolkit/Polar-Charts/RenderingPosition.md index f932f521..12b8e645 100644 --- a/maui-toolkit/Polar-Charts/RenderingPosition.md +++ b/maui-toolkit/Polar-Charts/RenderingPosition.md @@ -3,15 +3,15 @@ layout: post title: Polar Axis Angle in .NET MAUI Chart control | Syncfusion description: Learn here all about the rendering position of the axis in the Syncfusion® .NET MAUI Chart (SfPolarChart) control. platform: maui-toolkit -control: SfPolarChart documentation: ug +keywords: .net maui polar chart, rendering position, start angle, series rotation, axis angle customization, maui toolkit --- # Rendering Position in .NET MAUI Chart ## Start Angle -Adjust the rendering position of series on polar chart by leveraging the [StartAngle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_StartAngle) property, offering four degree values: 0, 90, 180, and 270. The default setting for the [StartAngle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_StartAngle) property is [Rotate270](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPolarAngle.html#Syncfusion_Maui_Toolkit_Charts_ChartPolarAngle_Rotate270). +You can adjust the rendering position of series on polar chart by using the [StartAngle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_StartAngle) property. This property offers four degree values: 0, 90, 180, and 270. The default setting for the [StartAngle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.html#Syncfusion_Maui_Toolkit_Charts_SfPolarChart_StartAngle) property is [Rotate270](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartPolarAngle.html#Syncfusion_Maui_Toolkit_Charts_ChartPolarAngle_Rotate270). {% tabs %} @@ -36,8 +36,8 @@ Adjust the rendering position of series on polar chart by leveraging the [StartA // Create a new instance of SfPolarChart SfPolarChart chart = new SfPolarChart(); - -chart.StartAngle = ChartPolarAngle.Rotate0; // Set the start angle of the chart to 0 degrees +// Set the start angle of the chart to 0 degrees +chart.StartAngle = ChartPolarAngle.Rotate0; // Create and set the primary (X) axis as a CategoryAxis CategoryAxis primaryAxis = new CategoryAxis(); @@ -50,7 +50,9 @@ chart.SecondaryAxis = secondaryAxis; // Create a new PolarAreaSeries PolarAreaSeries series = new PolarAreaSeries() { - . . . + ItemsSource = new ViewModel().PlantDetails, + XBindingPath = "Direction", + YBindingPath = "Tree" }; // Add the series to the chart's collection of series diff --git a/maui-toolkit/Polar-Charts/Tooltip.md b/maui-toolkit/Polar-Charts/Tooltip.md index 12b8513f..2ec9ffa6 100644 --- a/maui-toolkit/Polar-Charts/Tooltip.md +++ b/maui-toolkit/Polar-Charts/Tooltip.md @@ -5,6 +5,7 @@ description: Learn here all about how to enable tooltips and customize them in t platform: maui-toolkit control: SfPolarChart documentation: ug +keywords: .net maui polar chart, tooltip customization, tooltip enable, custom tooltip template, tooltip methods, tooltip duration, maui toolkit --- # Tooltip in .NET MAUI Chart @@ -21,7 +22,9 @@ To define the tooltip in the series, set the [EnableTooltip](https://help.syncfu . . . - @@ -51,17 +54,16 @@ this.Content = chart; ![Tooltip template in MAUI Chart](Tooltip_images/MAUI_polar_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 [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.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 [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPolarChart.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. +* [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 milliseconds. * [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. - {% tabs %} {% highlight xaml %} @@ -140,17 +142,17 @@ The [SfPolarChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.T {% highlight xaml %} - + - @@ -220,10 +222,6 @@ The [Show](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.C {% endhighlight %} -{% endtabs %} - -{% tabs %} - {% highlight c# %} private void Button_Clicked(object sender, EventArgs e) diff --git a/maui-toolkit/Pyramid-Charts/Appearance.md b/maui-toolkit/Pyramid-Charts/Appearance.md index 1e341d7d..91297e55 100644 --- a/maui-toolkit/Pyramid-Charts/Appearance.md +++ b/maui-toolkit/Pyramid-Charts/Appearance.md @@ -1,15 +1,16 @@ --- 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 (SfPyramidChart), its elements and more. platform: maui-toolkit control: SfPyramidChart documentation: ug +keywords: .net maui pyramid chart, appearance customization, custom palette brushes, gradient application, pyramid modes, maui toolkit --- # Appearance in .NET MAUI Pyramid Chart -The appearance of the [SfPyramidChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html) can be customized by using the predefined palettes, custom palettes, and gradient which allows enriching the application. +The appearance of the [SfPyramidChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html) can be customized by using predefined palettes, custom palettes, and gradients which allow enriching the application. ## Custom PaletteBrushes @@ -32,21 +33,21 @@ The [SfPyramidChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui public class StageViewModel { - public ObservableCollection Data { get; set; } - - public List CustomBrushes { get; set; } - - public StageViewModel() - { - //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))); - CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 172, 193))); - CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 151, 167))); - CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 131, 143))); - } -. . . + public ObservableCollection Data { get; set; } + + public List CustomBrushes { get; set; } + + public StageViewModel() + { + // 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))); + CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 172, 193))); + CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 151, 167))); + CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(0, 131, 143))); + } + . . . } {% endhighlight %} @@ -76,55 +77,57 @@ The gradient for the pyramid chart can be set by using the [PaletteBrushes](http public class StageViewModel { - public ObservableCollection Data { get; set; } - - public List CustomBrushes { get; set; } - public StageViewModel() - { - CustomBrushes = new List(); - LinearGradientBrush gradientColor1 = new LinearGradientBrush(); - gradientColor1.GradientStops = new GradientStopCollection() - { - new GradientStop() { Offset = 1, Color = Color.FromArgb("#a3bded") }, - new GradientStop() { Offset = 0, Color = Color.FromArgb("#6991c7") }, - }; - - LinearGradientBrush gradientColor2 = new LinearGradientBrush(); - gradientColor2.GradientStops = new GradientStopCollection() - { - new GradientStop() { Offset = 1, Color = Color.FromArgb("#A5678E") }, - new GradientStop() { Offset = 0, Color = Color.FromArgb("#E8B7D4") } - }; - - LinearGradientBrush gradientColor3 = new LinearGradientBrush(); - gradientColor3.GradientStops = new GradientStopCollection() - { - new GradientStop() { Offset = 1, Color = Color.FromArgb("#FFCAD4") }, - new GradientStop() { Offset = 0, Color = Color.FromArgb("#FB7B8E") } - }; - - LinearGradientBrush gradientColor4 = new LinearGradientBrush(); - gradientColor4.GradientStops = new GradientStopCollection() - { - new GradientStop() { Offset = 1, Color = Color.FromArgb("#FDC094") }, - new GradientStop() { Offset = 0, Color = Color.FromArgb("#FFE5D8") } - }; - - LinearGradientBrush gradientColor5 = new LinearGradientBrush(); - gradientColor5.GradientStops = new GradientStopCollection() - { - new GradientStop() { Offset = 1, Color = Color.FromArgb("#CFF4D2") }, - new GradientStop() { Offset = 0, Color = Color.FromArgb("#56C596") } - }; - - //Adding gradient brush to the custom brushes collection. - CustomBrushes.Add(gradientColor1); - CustomBrushes.Add(gradientColor2); - CustomBrushes.Add(gradientColor3); - CustomBrushes.Add(gradientColor4); - CustomBrushes.Add(gradientColor5); - } -. . . + public ObservableCollection Data { get; set; } + + public List CustomBrushes { get; set; } + + public StageViewModel() + { + CustomBrushes = new List(); + + LinearGradientBrush gradientColor1 = new LinearGradientBrush(); + gradientColor1.GradientStops = new GradientStopCollection() + { + new GradientStop() { Offset = 1, Color = Color.FromArgb("#a3bded") }, + new GradientStop() { Offset = 0, Color = Color.FromArgb("#6991c7") }, + }; + + LinearGradientBrush gradientColor2 = new LinearGradientBrush(); + gradientColor2.GradientStops = new GradientStopCollection() + { + new GradientStop() { Offset = 1, Color = Color.FromArgb("#A5678E") }, + new GradientStop() { Offset = 0, Color = Color.FromArgb("#E8B7D4") } + }; + + LinearGradientBrush gradientColor3 = new LinearGradientBrush(); + gradientColor3.GradientStops = new GradientStopCollection() + { + new GradientStop() { Offset = 1, Color = Color.FromArgb("#FFCAD4") }, + new GradientStop() { Offset = 0, Color = Color.FromArgb("#FB7B8E") } + }; + + LinearGradientBrush gradientColor4 = new LinearGradientBrush(); + gradientColor4.GradientStops = new GradientStopCollection() + { + new GradientStop() { Offset = 1, Color = Color.FromArgb("#FDC094") }, + new GradientStop() { Offset = 0, Color = Color.FromArgb("#FFE5D8") } + }; + + LinearGradientBrush gradientColor5 = new LinearGradientBrush(); + gradientColor5.GradientStops = new GradientStopCollection() + { + new GradientStop() { Offset = 1, Color = Color.FromArgb("#CFF4D2") }, + new GradientStop() { Offset = 0, Color = Color.FromArgb("#56C596") } + }; + + // Adding gradient brushes to the custom brushes collection. + CustomBrushes.Add(gradientColor1); + CustomBrushes.Add(gradientColor2); + CustomBrushes.Add(gradientColor3); + CustomBrushes.Add(gradientColor4); + CustomBrushes.Add(gradientColor5); + } + . . . } {% endhighlight %} @@ -135,7 +138,7 @@ public class StageViewModel ## Pyramid modes -The [SfPyramidChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html) allows you to render a chart in a linear or surface mode by using the [Mode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html#Syncfusion_Maui_Toolkit_Charts_SfPyramidChart_Mode) property. In the [Linear](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PyramidMode.html#Syncfusion_Maui_Toolkit_Charts_PyramidMode_Linear) mode, the height of the pyramid segment is based on the y-value. In the [Surface](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PyramidMode.html#Syncfusion_Maui_Toolkit_Charts_PyramidMode_Surface) mode, the area of the pyramid segment is based on the y-value. By default, the Mode property is set to linear. +The [SfPyramidChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html) allows you to render a chart in linear or surface mode by using the [Mode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html#Syncfusion_Maui_Toolkit_Charts_SfPyramidChart_Mode) property. In the [Linear](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PyramidMode.html#Syncfusion_Maui_Toolkit_Charts_PyramidMode_Linear) mode, the height of the pyramid segment is based on the y-value. In the [Surface](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PyramidMode.html#Syncfusion_Maui_Toolkit_Charts_PyramidMode_Surface) mode, the area of the pyramid segment is based on the y-value. By default, the Mode property is set to linear. {% tabs %} @@ -158,8 +161,9 @@ ViewModel viewModel = new ViewModel(); chart.ItemsSource = viewModel.Data; chart.XBindingPath = "XValue"; chart.YBindingPath = "YValue"; -chart.Mode = PyramidMode.Surface; //Setting the pyramid mode for the chart. +chart.Mode = PyramidMode.Surface; // Setting the pyramid mode for the chart. this.Content = chart; + {% endhighlight %} {% endtabs %} diff --git a/maui-toolkit/Pyramid-Charts/DataLabels.md b/maui-toolkit/Pyramid-Charts/DataLabels.md index 89a79334..3aa10a7a 100644 --- a/maui-toolkit/Pyramid-Charts/DataLabels.md +++ b/maui-toolkit/Pyramid-Charts/DataLabels.md @@ -1,25 +1,26 @@ --- 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 (SfPyramidChart). +title: Data Labels in .NET MAUI Chart control | .NET MAUI | Syncfusion +description: This section explains how to configure data labels and their features in .NET MAUI Chart (SfPyramidChart). platform: maui-toolkit control: SfPyramidChart documentation: ug +keywords: .net maui pyramid chart, data labels, label customization, enable data labels, label placement, label style, maui toolkit --- # 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. ## 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.SfPyramidChart.html#Syncfusion_Maui_Toolkit_Charts_SfPyramidChart_ShowDataLabels) property to true. The default value of [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html#Syncfusion_Maui_Toolkit_Charts_SfPyramidChart_ShowDataLabels) property is false. +To display data labels in the chart, set the [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html#Syncfusion_Maui_Toolkit_Charts_SfPyramidChart_ShowDataLabels) property to true. The default value of the [ShowDataLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html#Syncfusion_Maui_Toolkit_Charts_SfPyramidChart_ShowDataLabels) property is false. {% tabs %} {% highlight xaml %} - + . . . @@ -36,22 +37,22 @@ this.Content = chart; {% 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.SfPyramidChart.html#Syncfusion_Maui_Toolkit_Charts_SfPyramidChart_DataLabelSettings) property of the chart. For customizing, need to create an instance of [PyramidDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PyramidDataLabelSettings.html) and set to the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html#Syncfusion_Maui_Toolkit_Charts_SfPyramidChart_DataLabelSettings) property.The following properties, which are available in [PyramidDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PyramidDataLabelSettings.html), are used to customize the data labels. +Data labels can be customized using the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html#Syncfusion_Maui_Toolkit_Charts_SfPyramidChart_DataLabelSettings) property of the chart. For customization, you need to create an instance of [PyramidDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PyramidDataLabelSettings.html) and assign it to the [DataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html#Syncfusion_Maui_Toolkit_Charts_SfPyramidChart_DataLabelSettings) property. The following properties available in [PyramidDataLabelSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PyramidDataLabelSettings.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 pyramid 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`](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PyramidDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_PyramidDataLabelSettings_Context) of type `PyramidDataLabelContext`, 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](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_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. - * [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_FontSize), of type `double`, indicates the font size. - * [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_Stroke), of type `Brush`, indicates the brush used to paint the border of the data label. - * [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_StrokeWidth), of type `double`, indicates the width of the label's border. - * [CornerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_CornerRadius), of type `CornerRadius`, indicates the rounded corner for label. - * [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_TextColor), of type `Color`, indicates the color of the displayed text. +* [LabelPlacement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_LabelPlacement) - Positions the pyramid 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), or [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) - Sets the interior of the chart segment as the data label background. +* [Context](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PyramidDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_PyramidDataLabelSettings_Context) - Of type `PyramidDataLabelContext`, 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) - Customizes the data label's appearance. The following properties are available in [LabelStyle](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartDataLabelSettings.html#Syncfusion_Maui_Toolkit_Charts_ChartDataLabelSettings_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. + * [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_FontSize) - Of type `double`, indicates the font size. + * [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_Stroke) - Of type `Brush`, indicates the brush used to paint the border of the data label. + * [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_StrokeWidth) - Of type `double`, indicates the width of the label's border. + * [CornerRadius](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_CornerRadius) - Of type `CornerRadius`, indicates the rounded corner for the label. + * [TextColor](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartLabelStyle.html#Syncfusion_Maui_Toolkit_Charts_ChartLabelStyle_TextColor) - Of type `Color`, indicates the color of the displayed text. {% tabs %} @@ -87,7 +88,7 @@ ChartDataLabelStyle labelStyle = new ChartDataLabelStyle() // Configure data label settings for the chart. chart.DataLabelSettings = new PyramidDataLabelSettings() { - Context = PyramidDataLabelContext.XValue, // Show x value in the label content. + Context = PyramidDataLabelContext.XValue, // Show X value in the label content. LabelPlacement = DataLabelPlacement.Outer, // Position the data labels at the outer side of the chart. UseSeriesPalette = true, // Set the interior of the chart to the data label background. LabelStyle = labelStyle, // Apply the style for data labels. diff --git a/maui-toolkit/Pyramid-Charts/Exporting.md b/maui-toolkit/Pyramid-Charts/Exporting.md index e5d0580e..e5d64fe1 100644 --- a/maui-toolkit/Pyramid-Charts/Exporting.md +++ b/maui-toolkit/Pyramid-Charts/Exporting.md @@ -5,13 +5,14 @@ description: Learn here how to export the chart view as an image and stream in t platform: maui-toolkit control: SfPyramidChart documentation: ug +keywords: .net maui pyramid chart, export chart as image, export chart as stream, image formats, save chart image, get chart stream, maui toolkit --- # Exporting in .NET MAUI Chart ## Export as an image -You can export the chart view as an image in the desired file format using the [SaveAsImage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_SaveAsImage_System_String_) method of [SfPyramidChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html). The supported image formats are **JPEG and PNG**. By default, i.e., if you didn’t mention any image format with the filename, the chart view will be exported as an image in the PNG format. +You can export the chart view as an image in your desired file format using the [SaveAsImage](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartBase.html#Syncfusion_Maui_Toolkit_Charts_ChartBase_SaveAsImage_System_String_) method of [SfPyramidChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html). The supported image formats are **JPEG and PNG**. By default, if you don't specify an image format with the filename, the chart view will be exported as a PNG image. N> The chart view can be exported as an image only when the chart view is added to the visual tree. @@ -20,34 +21,30 @@ The following code snippet demonstrates the usage of this method: {% tabs %} {% highlight c# %} - SfPyramidChart chart = new SfPyramidChart(); ... this.Content = chart; chart.SaveAsImage("ChartSample.jpeg"); // Export the chart view as an image in the JPEG format. - {% endhighlight %} {% 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 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 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 %} - ... NSPhotoLibraryUsageDescription @@ -56,28 +53,25 @@ Add the following code snippet to the "Info" file: This App needs permission to access the Photos ... - {% endhighlight %} {% endtabs %} ## 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 [SfPyramidChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.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 [SfPyramidChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.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: {% tabs %} {% highlight c# %} - SfPyramidChart chart = new SfPyramidChart(); ... this.Content = chart; -await chart.GetStreamAsync(ImageFileFormat.Jpeg); // Get the chart view as a stream in the JPEG format. - +var stream = await chart.GetStreamAsync(ImageFileFormat.Jpeg); // Get the chart view as a stream in the JPEG format. {% endhighlight %} -{% endtabs %} +{% endtabs %} \ No newline at end of file diff --git a/maui-toolkit/Pyramid-Charts/Getting-Started.md b/maui-toolkit/Pyramid-Charts/Getting-Started.md index f4afe7c2..4da9a2f6 100644 --- a/maui-toolkit/Pyramid-Charts/Getting-Started.md +++ b/maui-toolkit/Pyramid-Charts/Getting-Started.md @@ -5,6 +5,7 @@ description: Learn here all about getting started with Syncfusion® .NET MAUI Ch platform: maui-toolkit control: SfPyramidChart documentation: ug +keywords: .net maui pyramid chart, getting started, create .net maui project, add pyramid chart, enable data labels, enable legend, enable tooltip, bind data to chart, maui toolkit --- # Getting Started with .NET MAUI Pyramid Chart @@ -18,7 +19,7 @@ This section explains how to populate the Pyramid Chart with data, including add 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 @@ -44,20 +45,20 @@ In the **MauiProgram.cs** file, register the handler for Syncfusion® public static class MauiProgram { - public static MauiApp CreateMauiApp() - { - var builder = MauiApp.CreateBuilder(); - builder - .ConfigureSyncfusionToolkit() - .UseMauiApp() - .ConfigureFonts(fonts => - { - fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); - fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); - }); - - return builder.Build(); - } + public static MauiApp CreateMauiApp() + { + var builder = MauiApp.CreateBuilder(); + builder + .ConfigureSyncfusionToolkit() + .UseMauiApp() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); + }); + + return builder.Build(); + } } {% endhighlight %} @@ -111,9 +112,9 @@ 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 @@ -140,20 +141,20 @@ In the **MauiProgram.cs** file, register the handler for Syncfusion® public static class MauiProgram { - public static MauiApp CreateMauiApp() - { - var builder = MauiApp.CreateBuilder(); - builder - .ConfigureSyncfusionToolkit() - .UseMauiApp() - .ConfigureFonts(fonts => - { - fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); - fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); - }); - - return builder.Build(); - } + public static MauiApp CreateMauiApp() + { + var builder = MauiApp.CreateBuilder(); + builder + .ConfigureSyncfusionToolkit() + .UseMauiApp() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); + }); + + return builder.Build(); + } } {% endhighlight %} @@ -206,8 +207,8 @@ 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 @@ -232,20 +233,20 @@ In the **MauiProgram.cs** file, register the handler for Syncfusion® public static class MauiProgram { - public static MauiApp CreateMauiApp() - { - var builder = MauiApp.CreateBuilder(); - builder - .ConfigureSyncfusionToolkit() - .UseMauiApp() - .ConfigureFonts(fonts => - { - fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); - fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); - }); - - return builder.Build(); - } + public static MauiApp CreateMauiApp() + { + var builder = MauiApp.CreateBuilder(); + builder + .ConfigureSyncfusionToolkit() + .UseMauiApp() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); + }); + + return builder.Build(); + } } {% endhighlight %} @@ -570,8 +571,9 @@ using Syncfusion.Maui.Toolkit.Charts; public partial class MainPage : ContentPage { - public MainWindow() + public MainPage() { + InitializeComponent(); SfPyramidChart chart = new SfPyramidChart(); chart.Title = new Label() { diff --git a/maui-toolkit/Pyramid-Charts/Legend.md b/maui-toolkit/Pyramid-Charts/Legend.md index 1bb257a4..6b40cf1a 100644 --- a/maui-toolkit/Pyramid-Charts/Legend.md +++ b/maui-toolkit/Pyramid-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 (SfPyramidChart) control. +description: This section explains how to initialize legend and its customization in Syncfusion® .NET MAUI Chart (SfPyramidChart) control. platform: maui-toolkit control: SfPyramidChart documentation: ug @@ -12,7 +12,6 @@ keywords: .net maui pyramid chart, pyramid-chart, chart legend, legend-wrap, leg 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 pyramid chart. - ## 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. @@ -183,7 +182,7 @@ The legend can be positioned to the left, right, top, or bottom of the chart are {% highlight xaml %} - @@ -300,7 +299,7 @@ The [ItemsLayout](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.To XBindingPath="Name" YBindingPath="Value"> - + @@ -338,7 +337,7 @@ 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`. +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. diff --git a/maui-toolkit/Pyramid-Charts/Overview.md b/maui-toolkit/Pyramid-Charts/Overview.md index 1fedc5d0..b69de224 100644 --- a/maui-toolkit/Pyramid-Charts/Overview.md +++ b/maui-toolkit/Pyramid-Charts/Overview.md @@ -1,20 +1,21 @@ --- layout: post -title: About .NET MAUI Chart Control | Syncfusion -description: Learn here all about introduction of Syncfusion® .NET MAUI Chart(SfPyramidChart) control with key features and more. +title: About .NET MAUI Pyramid Chart Control | Syncfusion +description: Learn about the introduction of Syncfusion® .NET MAUI Pyramid Chart (SfPyramidChart) control with key features and more. platform: maui-toolkit control: SfPyramidChart documentation: ug +keywords: .net maui pyramid chart, sfpyramidchart, hierarchical data visualization, data proportions, interactive features, selection, tooltips, chart legends, customization options, segment spacing, maui toolkit --- # .NET MAUI Pyramid Chart Overview -The Syncfusion® Toolkit for .NET MAUI Pyramid Chart (`SfPyramidChart`) provides a visually appealing way to represent proportions within hierarchical data. It is widely used to display data as percentages of a total, with each segment representing a part of the whole. This single-series chart, without axes, is perfect for high-quality .NET MAUI applications. +The Syncfusion® .NET MAUI Pyramid Chart ([SfPyramidChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html)) provides a visually appealing way to represent hierarchical data proportions. It effectively displays data as percentages of a whole, with each segment representing a portion of the total. This single-series chart, without axes, is perfect for creating high-quality visualizations in .NET MAUI applications. ## Key Features * **User Interaction**: Enhances the end-user experience with interactive features like selection and tooltips, allowing users to gain deeper insights into each pyramid segment. -* **Legends**: Displays legends that provide additional information about each segment. Legends can also be scrolled if they exceed the available space, ensuring easy navigation. +* **Legends**: Provides informative legends that offer additional context about each segment. If legends exceed the available space, they can be scrolled for easy navigation. -* **Customization**: Offers extensive customization options for features such as chart title, data labels, legends, and segment spacing, allowing for a tailored and visually striking chart. \ No newline at end of file +* **Customization**: Offers extensive options to customize chart elements including title, data labels, legends, and segment spacing, enabling you to create visually striking and tailored charts. \ No newline at end of file diff --git a/maui-toolkit/Pyramid-Charts/Segment-Spacing.md b/maui-toolkit/Pyramid-Charts/Segment-Spacing.md index 5bbc08d4..11d7dba0 100644 --- a/maui-toolkit/Pyramid-Charts/Segment-Spacing.md +++ b/maui-toolkit/Pyramid-Charts/Segment-Spacing.md @@ -1,22 +1,23 @@ --- layout: post -title: Segment spacing in .NET MAUI Chart control Syncfusion -description: Learn here all about segment spacing customization in .NET MAUI Chart (SfPyramidChart), its elements and more. +title: Segment Spacing in .NET MAUI Chart Control | Syncfusion +description: Learn here all about segment spacing customization in Syncfusion® .NET MAUI Pyramid Chart (SfPyramidChart) control and more. platform: maui-toolkit control: SfPyramidChart documentation: ug +keywords: .net maui pyramid chart, segment spacing, gapratio, pyramid chart customization, segment gap, chart configuration, maui toolkit --- -# Segment spacing in .NET MAUI Pyramid Chart +# Segment Spacing in .NET MAUI Pyramid Chart -The gap between each segment in the pyramid chart can be set using the [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html#Syncfusion_Maui_Toolkit_Charts_SfPyramidChart_GapRatio) property. The default value of [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html#Syncfusion_Maui_Toolkit_Charts_SfPyramidChart_GapRatio) property is `0` and its value ranges from `0 to 1`. +The gap between each segment in the pyramid chart can be customized using the [GapRatio](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html#Syncfusion_Maui_Toolkit_Charts_SfPyramidChart_GapRatio) property. The default value of the `GapRatio` property is `0`, and its value ranges from `0` to `1`. {% tabs %} -{% highlight xml %} +{% highlight xaml %} -. . . + {% endhighlight %} @@ -24,12 +25,13 @@ The gap between each segment in the pyramid chart can be set using the [GapRatio {% highlight c# %} SfPyramidChart chart = new SfPyramidChart(); -. . . -chart.GapRatio = 0.2; // Set gap ratio between pyramid segments. -. . . +// Chart configuration +chart.GapRatio = 0.2; // Set gap ratio between pyramid segments +// Additional configuration this.Content = chart; + {% endhighlight %} {% endtabs %} -![Segment spacing in MAUI Chart](Segment_Spacing_images/MAUI_spacing_chart.png) +![Segment spacing in .NET MAUI Pyramid Chart](Segment_Spacing_images/MAUI_spacing_chart.png) \ No newline at end of file diff --git a/maui-toolkit/Pyramid-Charts/Tooltip.md b/maui-toolkit/Pyramid-Charts/Tooltip.md index f69127d6..a063d78e 100644 --- a/maui-toolkit/Pyramid-Charts/Tooltip.md +++ b/maui-toolkit/Pyramid-Charts/Tooltip.md @@ -1,15 +1,16 @@ --- 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 (SfPyramidChart) control +description: This section explains how to enable tooltip and its customization in Syncfusion® .NET MAUI Chart (SfPyramidChart) control platform: maui-toolkit control: SfPyramidChart documentation: ug +keywords: .net maui pyramid chart, tooltip customization, enable tooltip, tooltip template, tooltip duration, maui toolkit --- # Tooltip in .NET MAUI Chart -The tooltip helps in providing additional information while hovering over the funnel segment. By default, the value of the pyramid process (Y value) will be shown in the tooltip. +The tooltip helps in providing additional information when hovering over a funnel segment. By default, the value of the pyramid process (Y value) will be shown in the tooltip. ## Enable Tooltip @@ -23,7 +24,6 @@ To define the tooltip in the chart, set the [EnableTooltip](https://help.syncfus . . . - {% endhighlight %} {% highlight c# %} @@ -32,15 +32,16 @@ SfPyramidChart chart = new SfPyramidChart(); . . . chart.EnableTooltip = true; // Enable tooltip for the chart. this.Content = chart; + {% endhighlight %} {% endtabs %} ![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 [SfPyramidChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.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 [SfPyramidChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.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. +* [Background](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_Background) of type `Brush`, indicates the background color of 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. * [FontFamily](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontFamily) of type `string`, indicates the font family for the label. * [FontSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartTooltipBehavior.html#Syncfusion_Maui_Toolkit_Charts_ChartTooltipBehavior_FontSize) of type `float`, indicates the font size. @@ -50,7 +51,7 @@ The [ChartTooltipBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusio {% tabs %} -{% highlight xml %} +{% highlight xaml %} . . . @@ -74,13 +75,14 @@ chart.TooltipBehavior = new ChartTooltipBehavior() }; . . . this.Content = chart; + {% endhighlight %} {% endtabs %} ## Tooltip Template -[TooltipTemplate](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html#Syncfusion_Maui_Toolkit_Charts_SfPyramidChart_TooltipTemplate) is used to show additional information other than the default UI. +The [TooltipTemplate](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfPyramidChart.html#Syncfusion_Maui_Toolkit_Charts_SfPyramidChart_TooltipTemplate) property is used to display additional information beyond the default UI. {% tabs %} @@ -104,8 +106,8 @@ this.Content = chart; - + . . . @@ -117,9 +119,10 @@ this.Content = chart; SfPyramidChart chart = new SfPyramidChart(); . . . 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. . . . this.Content = chart; + {% endhighlight %} {% endtabs %}