Skip to content

TASK 958857 Improve MAUI Toolkit Circular Chart UG Content Using Syncfusion Continue AI #307

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: hotfix/hotfix-v30.1.37
Choose a base branch
from
Open

TASK 958857 Improve MAUI Toolkit Circular Chart UG Content Using Syncfusion Continue AI #307

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7fa4426
Committed the circular and funnel chart content
May 22, 2025
5bd2c7f
reverted the changes
Jun 3, 2025
d00a3d3
Improved the content for the circular chart
Jun 3, 2025
0b08339
Addressed the review changes
Jul 1, 2025
6dd2235
Aligned the code
Jul 1, 2025
392bb73
Added the keywords for the circular chart
Jul 1, 2025
1837dd4
keywords modified
VimalaThirumalaikumar Jul 18, 2025
5ccdf52
Committed the unwanted changes
Jul 18, 2025
7e51fde
Merge branch 'hotfix_Content_update_for_Syncfusion_Maui_toolkit_UG' o…
Jul 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 42 additions & 56 deletions maui-toolkit/Circular-Charts/Appearance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Appearance in .NET MAUI Chart control Syncfusion
title: Appearance in .NET MAUI Chart control | Syncfusion
description: Learn here all about appearance customization in .NET MAUI Chart (SfCircularChart), its elements and more.
platform: maui-toolkit
control: SfCircularChart
Expand All @@ -9,30 +9,26 @@ documentation: ug

# Appearance in .NET MAUI Circular Chart

The appearance of the [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) can be customized by using the predefined palettes, custom palettes, and gradient which allows enriching the application.
The appearance of the [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) can be customized by using predefined palettes, custom palettes, and gradients, which allows enriching your application.

## Custom PaletteBrushes

The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) provides support to define own brushes for series with preferred order by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) property as shown in the following code example.
The [SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) provides support to define your own brushes for series with preferred order by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_PaletteBrushes) property as shown in the following code example.

{% tabs %}

{% highlight xaml %}

<chart:SfCircularChart>
. . .
<!-- Other chart configurations -->
<chart:PieSeries
ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
PaletteBrushes="{Binding CustomBrushes}"/>
</chart:SfCircularChart>


{% endhighlight %}

{% highlight c# %}

public class ViewModel
{
// Collection to hold the data for the chart
Expand All @@ -56,7 +52,6 @@ public class ViewModel

// ... Other methods and properties ...
}

{% endhighlight %}

{% endtabs %}
Expand All @@ -70,19 +65,17 @@ The gradient for the circular chart can be set by using the [PaletteBrushes](htt
{% tabs %}

{% highlight xaml %}

<chart:SfCircularChart>
. . .
<chart:PieSeries ItemsSource="{Binding Data}"
<!-- Other chart configurations -->
<chart:PieSeries
ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
PaletteBrushes="{Binding CustomBrushes}"/>
</chart:SfCircularChart>

{% endhighlight %}

{% highlight c# %}

public class ViewModel
{
// Collection to hold data models
Expand All @@ -102,13 +95,12 @@ public class ViewModel
new GradientStop() { Offset = 1, Color = Color.FromRgb(255, 231, 199) },
new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 182, 159) }
};

// Create and configure gradient brush 2
LinearGradientBrush gradientColor2 = new LinearGradientBrush();
gradientColor2.GradientStops = new GradientStopCollection()
{
new GradientStop() { Offset = 1, Color = Color.FromRgb(250, 221, 125) },
new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 204, 45) }
new GradientStop() { Offset = 1, Color = Color.FromRgb(180, 225, 151) },
new GradientStop() { Offset = 0, Color = Color.FromRgb(111, 183, 214) }
};

// Create and configure gradient brush 3
Expand All @@ -130,10 +122,10 @@ public class ViewModel
// Create and configure gradient brush 5
LinearGradientBrush gradientColor5 = new LinearGradientBrush();
gradientColor5.GradientStops = new GradientStopCollection()
{
{
new GradientStop() { Offset = 1, Color = Color.FromRgb(168, 234, 238) },
new GradientStop() { Offset = 0, Color = Color.FromRgb(123, 176, 249) }
};
};

// Add all gradient brushes to the CustomBrushes list
CustomBrushes.Add(gradientColor1);
Expand All @@ -144,71 +136,65 @@ public class ViewModel
}
// ... (other methods or properties)
}

{% endhighlight %}

{% endtabs %}

![Gradient support in MAUI Chart](Appearance_images/MAUI_pie_chart_gradient.png)

## Plotting Area Customization:
## Plotting Area Customization

[SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html?tabs=tabid-1) allows you to add any view to the chart plot area, which is useful for adding any relevant data, a watermark, or a color gradient to the background of the chart.
[SfCircularChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCircularChart.html) allows you to add any view to the chart plot area, which is useful for adding relevant data, watermarks, or color gradients to the background of the chart.

{% tabs %}

{% highlight xaml %}

<chart:SfCircularChart>
. . .
<!-- Other chart configurations -->
<chart:SfCircularChart.PlotAreaBackgroundView>
<AbsoluteLayout>
<Border Stroke="red"
StrokeThickness="2"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"/>
<Label Text="Copyright @ 2001 - 2022 Syncfusion Inc"
FontSize="18"
AbsoluteLayout.LayoutBounds="1,1,-1,-1"
AbsoluteLayout.LayoutFlags="PositionProportional"
Opacity="0.4"/>
<Label Text="CONFIDENTIAL"
Rotation="340"
FontSize="80"
FontAttributes="Bold,Italic"
TextColor="Gray"
Margin="10,0,0,0"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
AbsoluteLayout.LayoutFlags="PositionProportional"
Opacity="0.3"/>
</AbsoluteLayout>
<AbsoluteLayout>
<Border Stroke="red"
StrokeThickness="2"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"/>
<Label Text="Copyright @ 2001 - 2022 Syncfusion Inc"
FontSize="18"
AbsoluteLayout.LayoutBounds="1,1,-1,-1"
AbsoluteLayout.LayoutFlags="PositionProportional"
Opacity="0.4"/>
<Label Text="CONFIDENTIAL"
Rotation="340"
FontSize="80"
FontAttributes="Bold,Italic"
TextColor="Gray"
Margin="10,0,0,0"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
AbsoluteLayout.LayoutFlags="PositionProportional"
Opacity="0.3"/>
</AbsoluteLayout>
</chart:SfCircularChart.PlotAreaBackgroundView>
</chart:SfCircularChart>

{% endhighlight %}

{% highlight c# %}

// Create a new SfCircularChart
SfCircularChart chart = new SfCircularChart();

// Create an AbsoluteLayout to hold custom elements
AbsoluteLayout absoluteLayout = new AbsoluteLayout();

// Create a border for the chart plot area
var border = new Border()
var border = new Border()
{
Stroke = Colors.Red,
Stroke = new SolidColorBrush(Colors.Red),
StrokeThickness = 2
};

// Set the border to cover the entire chart area
AbsoluteLayout.SetLayoutBounds(border, new Rect(0, 0, 1, 1));
AbsoluteLayout.SetLayoutFlags(border, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.All);
absoluteLayout.Children.Add(border);

// Create a copyright label
var copyRight = new Label()
var copyRight = new Label()
{
Text = "Copyright @ 2001 - 2022 Syncfusion Inc",
FontSize = 18,
Expand All @@ -223,25 +209,25 @@ absoluteLayout.Children.Add(copyRight);
// Create a watermark label
var watermark = new Label()
{
Text = "CONFIDENTIAL",
Text = "CONFIDENTIAL",
Rotation = 340,
FontSize = 80,
FontAttributes = FontAttributes.Bold,
FontAttributes = FontAttributes.Bold | FontAttributes.Italic,
TextColor = Colors.Gray,
Margin = new Thickness(10, 0, 0, 0),
Opacity = 0.3
};

// Position the watermark label at the center of the plot area
// Position the watermark in the center
AbsoluteLayout.SetLayoutBounds(watermark, new Rect(0.5, 0.5, -1, -1));
AbsoluteLayout.SetLayoutFlags(watermark, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.PositionProportional);
absoluteLayout.Children.Add(watermark);

// Set the custom AbsoluteLayout as the chart's background
// Set the AbsoluteLayout as the PlotAreaBackgroundView
chart.PlotAreaBackgroundView = absoluteLayout;

// Set the chart as the content of the current page/view
this.Content = chart;

{% endhighlight %}

{% endtabs %}
Expand Down
Loading