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 6 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

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7fa4426
Committed the circular and funnel chart content
NitheeshkumarThangaraj May 22, 2025
5bd2c7f
reverted the changes
NitheeshkumarThangaraj Jun 3, 2025
d00a3d3
Improved the content for the circular chart
NitheeshkumarThangaraj Jun 3, 2025
0b08339
Addressed the review changes
NitheeshkumarThangaraj Jul 1, 2025
6dd2235
Aligned the code
NitheeshkumarThangaraj Jul 1, 2025
392bb73
Added the keywords for the circular chart
NitheeshkumarThangaraj Jul 1, 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
94 changes: 40 additions & 54 deletions maui-toolkit/Circular-Charts/Appearance.md
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,35 @@
---
layout: post
title: Appearance in .NET MAUI Chart control Syncfusion
title: Appearance in .NET MAUI Chart control | Syncfusion
description: Learn here all about appearance customization in .NET MAUI Chart (SfCircularChart), its elements and more.
platform: maui-toolkit
control: SfCircularChart
documentation: ug
keywords: .net maui chart appearance, series brushes maui chart, syncfusion circular chart custom palette, gradient brushes circular chart, plotting area customization maui chart.
---

# Appearance in .NET MAUI Circular Chart

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

## Custom PaletteBrushes

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

{% tabs %}

{% highlight xaml %}

<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
@@ -56,7 +53,6 @@ public class ViewModel

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

{% endhighlight %}

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

{% highlight xaml %}

<chart:SfCircularChart>
. . .
<chart:PieSeries ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
PaletteBrushes="{Binding CustomBrushes}"/>
<!-- 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
@@ -102,7 +95,6 @@ public class ViewModel
new GradientStop() { Offset = 1, Color = Color.FromRgb(255, 231, 199) },
new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 182, 159) }
};

// Create and configure gradient brush 2
LinearGradientBrush gradientColor2 = new LinearGradientBrush();
gradientColor2.GradientStops = new GradientStopCollection()
@@ -144,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,
StrokeThickness = 2
};

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

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

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

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

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

{% endhighlight %}

{% endtabs %}
Loading
Oops, something went wrong.