Skip to content

Improve MAUI Toolkit Cartesian Chart UG Content Using Syncfusion Continue AI #308

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 3 commits into
base: hotfix/hotfix-v29.1.33
Choose a base branch
from
+665 −812
Open

Improve MAUI Toolkit Cartesian Chart UG Content Using Syncfusion Continue AI #308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8707e53
checked UG content for axis folder
Harsha-SF4223 May 21, 2025
e340d91
Updated UG content for Series and other files.
Harsha-SF4223 May 21, 2025
2fdc86c
added trade mark symbol
Harsha-SF4223 May 22, 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
2 changes: 1 addition & 1 deletion maui-toolkit/Cartesian-Charts/Add-custom-labels.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Keywords: .net maui chart custom axis labels, .net maui chart axis label customi

# Add custom labels to the chart axis

[ChartAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html) provides the [OnCreateLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_OnCreateLabels) override method to add custom axis labels. The [OnCreateLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_OnCreateLabels) method is called whenever new labels are generated. The following properties are available to add custom labels.
[ChartAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html) provides the [OnCreateLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_OnCreateLabels) override method to add custom axis labels. The [OnCreateLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_OnCreateLabels) method is called whenever new labels are generated. The following properties are available to add custom labels:

* [VisibleLabels](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_VisibleLabels) - This property is used to get an Observable Collection of visible axis labels.

Expand Down
90 changes: 12 additions & 78 deletions maui-toolkit/Cartesian-Charts/Annotation.md
View file
Open in desktop

Large diffs are not rendered by default.

21 changes: 14 additions & 7 deletions maui-toolkit/Cartesian-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 (SfCartesianChart), its elements and more.
platform: maui-toolkit
control: SfCartesianChart
Expand All @@ -9,15 +9,15 @@ keywords: .net maui cartesian chart appearance, .net maui chart appearance custo
---

# Appearance in .NET MAUI Cartesian Chart
The appearance of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) can be customized by using the predefined brushes, custom brushes and gradient, which allows to enrich the application.
The appearance of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) can be customized by using predefined brushes, custom brushes, and gradients, which allows you to enhance your application's visual appeal.

## Applying PaletteBrushes for Chart

By default, chart applies a set of predefined brushes to the series in a predefined order. [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) provides [PaletteBrushes](hhttps://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_PaletteBrushes) property for applying various kinds of custom palettes brushes.
By default, chart applies a set of predefined brushes to the series in a predefined order. [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) provides the [PaletteBrushes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_PaletteBrushes) property for applying various kinds of custom palette brushes.

### Custom PaletteBrushes

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

{% tabs %}

Expand Down Expand Up @@ -76,6 +76,7 @@ public class ViewModel

// Create a new list to hold custom brushes for the chart.
public List<Brush> CustomBrushes { get; set; }

public ViewModel()
{
CustomBrushes = new List<Brush>();
Expand Down Expand Up @@ -123,9 +124,11 @@ public class ViewModel

// Create a new list to hold gradient brushes for the chart.
public List<Brush> CustomBrushes { get; set; }

public ViewModel()
{
CustomBrushes = new List<Brush>();

LinearGradientBrush gradientColor1 = new LinearGradientBrush();
gradientColor1.GradientStops = new GradientStopCollection()
{
Expand Down Expand Up @@ -177,9 +180,9 @@ public class ViewModel

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

## Plotting Area Customization:
## Plotting Area Customization

[SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.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.
[SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) allows you to add any view to the chart plot area, which is useful for adding relevant data, a watermark, or a color gradient to the background of the chart.

{% tabs %}

Expand Down Expand Up @@ -211,6 +214,7 @@ public class ViewModel

SfCartesianChart chart = new SfCartesianChart();
AbsoluteLayout absoluteLayout = new AbsoluteLayout();

var copyRight = new Label()
{
Text = "Copyright @ 2001 - 2022 Syncfusion Inc",
Expand All @@ -221,9 +225,11 @@ var copyRight = new Label()
AbsoluteLayout.SetLayoutBounds(copyRight, new Rect(1, 1, -1, -1));
AbsoluteLayout.SetLayoutFlags(copyRight, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.PositionProportional);
absoluteLayout.Children.Add(copyRight);

var watermark = new Label()
{
Text = "CONFIDENTIAL",Rotation = 340,
Text = "CONFIDENTIAL",
Rotation = 340,
FontSize = 80,
FontAttributes = FontAttributes.Bold,
TextColor = Colors.Gray,
Expand All @@ -233,6 +239,7 @@ var watermark = new Label()
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;
this.Content = chart;

Expand Down
12 changes: 6 additions & 6 deletions maui-toolkit/Cartesian-Charts/Area.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ keywords: .net maui area chart, .net maui chart area type, area chart customizat

## Area Chart

The area chart is rendered by using a collection of line segments connected to form a closed loop area, filled with the specified color. To render a area chart, create an instance of [AreaSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.AreaSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of the chart.
The area chart is rendered by using a collection of line segments connected to form a closed loop area, filled with the specified color. To render an area chart, create an instance of [AreaSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.AreaSeries.html) and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of the chart.

N> The Cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) as its default content.

Expand Down Expand Up @@ -46,7 +46,7 @@ chart.XAxes.Add(primaryAxis);
NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);

// Create a AreaSeries for the chart
// Create an AreaSeries for the chart
AreaSeries series = new AreaSeries()
{
ItemsSource = new ViewModel().Data,
Expand Down Expand Up @@ -144,18 +144,18 @@ AreaSeries series = new AreaSeries()
XBindingPath = "Year",
YBindingPath = "Percentage",
ShowMarkers = true, // Enable markers on data points for better visibility
};
};

chart.Series.Add(series);
this.Content= chart;
this.Content = chart;

{% endhighlight %}

{% endtabs %}

### 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.AreaSeries.html#Syncfusion_Maui_Toolkit_Charts_AreaSeries_MarkerSettings) property. The following properties are used to customize marker appearance.
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.AreaSeries.html#Syncfusion_Maui_Toolkit_Charts_AreaSeries_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](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ShapeType.html#Syncfusion_Maui_Toolkit_Charts_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.
Expand Down Expand Up @@ -192,7 +192,7 @@ In order to change the series markers appearance, create an instance of the [Mar
SfCartesianChart chart = new SfCartesianChart();
...
// Configure the marker settings for the chart series
ChartMarkerSettings chartMarker= new ChartMarkerSettings()
ChartMarkerSettings chartMarker = new ChartMarkerSettings()
{
Type = ShapeType.Diamond,
Fill = Colors.Brown,
Expand Down
10 changes: 5 additions & 5 deletions maui-toolkit/Cartesian-Charts/Axis/AutoScrollingDelta.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ keywords: .net maui chart auto scrolling, .net maui chart scrolling customizatio

# Auto scrolling in .NET MAUI Chart

The auto-scrolling of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) ensures that the specified range of data is always visible in the chart. It always shows the recently added data points at the end, and scrolling will be reset to the end of the range whenever a new point is added. The [AutoScrollingDelta](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AutoScrollingDelta) property of the chart axis can be used to set the number of data points to be always visible in the chart.
The auto-scrolling feature of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) ensures that a specified range of data is always visible in the chart. It continuously displays the most recently added data points at the end, and scrolling resets to the end of the range whenever a new point is added. The [AutoScrollingDelta](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AutoScrollingDelta) property of the chart axis can be used to set the number of data points to always remain visible in the chart.

By adding [ChartZoomPanBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html) to the chart, you can scroll to see the previous data points.
By adding [ChartZoomPanBehavior](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartZoomPanBehavior.html) to the chart, you can scroll to view previous data points.

{% tabs %}

Expand Down Expand Up @@ -56,7 +56,7 @@ this.Content = chart;

## AutoScrollingMode

[AutoScrollingMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AutoScrollingMode) property can be used to determine whether the axis should be scrolled from start position or end position. The default value of [AutoScrollingMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AutoScrollingMode) is `End`.
The [AutoScrollingMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AutoScrollingMode) property determines whether the axis should scroll from the start position or end position. The default value of [AutoScrollingMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartAxis.html#Syncfusion_Maui_Toolkit_Charts_ChartAxis_AutoScrollingMode) is `End`.

{% tabs %}

Expand Down Expand Up @@ -92,7 +92,7 @@ this.Content = chart;

## AutoScrollingDeltaType

In [DateTimeAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html), you can apply auto scrolling delta value in [Years](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Years), [Months](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Months), [Days](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Days), [Hours](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Hours), [Minutes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Minutes), [Seconds](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Seconds) and [Milliseconds](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Milliseconds) by setting [AutoScrollingDeltaType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html#Syncfusion_Maui_Toolkit_Charts_DateTimeAxis_AutoScrollingDeltaType) property. The default value of this property is [Auto](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Auto), and the delta will be calculated automatically based on range.
In [DateTimeAxis](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html), you can apply auto scrolling delta values in [Years](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Years), [Months](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Months), [Days](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Days), [Hours](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Hours), [Minutes](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Minutes), [Seconds](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Seconds), and [Milliseconds](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Milliseconds) by setting the [AutoScrollingDeltaType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeAxis.html#Syncfusion_Maui_Toolkit_Charts_DateTimeAxis_AutoScrollingDeltaType) property. The default value of this property is [Auto](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.DateTimeIntervalType.html#Syncfusion_Maui_Toolkit_Charts_DateTimeIntervalType_Auto), and the delta will be calculated automatically based on the range.

{% tabs %}

Expand All @@ -115,7 +115,7 @@ SfCartesianChart chart = new SfCartesianChart();
DateTimeAxis primaryAxis = new DateTimeAxis()
{
AutoScrollingDelta = 3,
AutoScrollingDeltaType = DateTimeDeltaType.Days, // Setting the type of the scrolling delta to Days, meaning the axis will scroll by 3 days.
AutoScrollingDeltaType = DateTimeIntervalType.Days, // Setting the type of the scrolling delta to Days, meaning the axis will scroll by 3 days.
};
chart.XAxes.Add(primaryAxis);
. . .
Expand Down
Loading