Skip to content

Commit 3a442ae

Browse files
committed
updated UG code for Funnel, pyramid and polar
1 parent bee8dcc commit 3a442ae

33 files changed

+536
-560
lines changed

maui-toolkit/Funnel-Charts/Appearance.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Appearance in .NET MAUI Chart control Syncfusion
3+
title: Appearance in .NET MAUI Chart control | Syncfusion
44
description: Learn here all about appearance customization in .NET MAUI Chart (SfFunnelChart), its elements and more.
55
platform: maui-toolkit
66
control: SfFunnelChart
@@ -9,11 +9,11 @@ documentation: ug
99

1010
# Appearance in .NET MAUI Funnel Chart
1111

12-
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.
12+
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.
1313

1414
## Custom PaletteBrushes
1515

16-
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.
16+
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.
1717

1818
{% tabs %}
1919

@@ -57,7 +57,7 @@ public class AdmissionViewModel
5757

5858
## Applying Gradient
5959

60-
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`.
60+
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`.
6161

6262
{% tabs %}
6363

@@ -131,4 +131,4 @@ public class AdmissionViewModel
131131

132132
{% endtabs %}
133133

134-
![Gradient support in MAUI Chart](Appearance_images/MAUI_funnel_chart.png)
134+
![Gradient support in MAUI Chart](Appearance_images/MAUI_funnel_chart.png)

maui-toolkit/Funnel-Charts/DataLabels.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,20 +37,20 @@ this.Content = chart;
3737

3838
## Data label customization
3939

40-
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.
41-
42-
* [`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).
43-
* [`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.
44-
* [`Context`]() of type `FunnelDataLabelContext`, indicates weather to show x or y value in the label content.
45-
* [`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]().
46-
* [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.
47-
* [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.
48-
* [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.
49-
* [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.
50-
* [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.
51-
* [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.
52-
* [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.
53-
* [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.
40+
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:
41+
42+
* [`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).
43+
* [`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.
44+
* [`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.
45+
* [`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):
46+
* [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.
47+
* [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.
48+
* [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.
49+
* [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.
50+
* [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.
51+
* [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.
52+
* [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.
53+
* [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.
5454

5555
{% tabs %}
5656

maui-toolkit/Funnel-Charts/Exporting.md

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,38 +11,36 @@ documentation: ug
1111

1212
## Export as an image
1313

14-
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.
14+
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.
1515

16-
N> The chart view can be exported as an image only when the chart view is added to the visual tree.
16+
N> The chart view can be exported as an image only when it is added to the visual tree.
1717

18-
The following code snippet demonstrates the usage of this method:
18+
The following code snippet demonstrates how to use this method:
1919

2020
{% tabs %}
2121

2222
{% highlight c# %}
2323

2424
SfFunnelChart chart = new SfFunnelChart();
25+
// Configure chart properties
2526
...
2627
this.Content = chart;
27-
chart.SaveAsImage("ChartSample.jpeg"); // Export the chart view as an image in the JPEG format.
28+
chart.SaveAsImage("ChartSample.jpeg"); // Export the chart view as an image in JPEG format
2829

2930
{% endhighlight %}
3031

3132
{% endtabs %}
3233

33-
T> We can change the image formats in above code by changing its extension as .jpg, .png.
34+
T> You can change the image format by simply changing the file extension to .jpg or .png in the filename.
3435

35-
The exported image will be saved in the different location across the platforms.
36+
The exported image will be saved in different locations across platforms:
3637

37-
**Windows Phone, Android and MAC** – The image will be saved inside the 'Pictures' directory of the file system.
38+
- **Windows Phone, Android, and MAC** – The image will be saved in the 'Pictures' directory of the file system.
39+
- **iOS** – The image will be saved in the 'Photos/Album' directory of the file system.
3840

39-
**iOS** – The image will be saved inside the 'Photos/Album' directory of the file system.
41+
For Android and Windows Phone devices, you must enable file writing permissions on the device storage to save images.
4042

41-
To save the image on Android and Windows Phone devices, you must enable file writing permissions on the device storage.
42-
43-
To save the image in the photo album on iOS devices, you must enable permission to access the device storage in the "Info" file.
44-
45-
Add the following code snippet to the "Info" file:
43+
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:
4644

4745
{% tabs %}
4846

@@ -63,20 +61,21 @@ Add the following code snippet to the "Info" file:
6361

6462
## Get the stream of Chart
6563

66-
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**.
64+
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**.
6765

68-
N> The charts stream can only be rendered when the chart view is added to the visual tree.
66+
N> The chart's stream can only be generated when the chart view is added to the visual tree.
6967

70-
The following code snippet demonstrates the usage of this method:
68+
The following code snippet demonstrates how to use this method:
7169

7270
{% tabs %}
7371

7472
{% highlight c# %}
7573

7674
SfFunnelChart chart = new SfFunnelChart();
75+
// Configure chart properties
7776
...
7877
this.Content = chart;
79-
await chart.GetStreamAsync(ImageFileFormat.Jpeg); // Get the chart view as a stream in the JPEG format.
78+
var stream = await chart.GetStreamAsync(ImageFileFormat.Jpeg); // Get the chart view as a stream in JPEG format
8079

8180
{% endhighlight %}
8281

0 commit comments

Comments
 (0)