Appearance in .NET MAUI Circular Chart

20 Jul 202616 minutes to read

The appearance of the SfCircularChart can be customized by using the predefined palettes, custom palettes, and gradient which allows enriching the application.

NOTE

Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the SfCircularChart control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.

Add a title

The title of the chart acts as the title to provide quick information to the user about the data being plotted in the chart. You can set title using the Title property of circular chart as follows.

<chart:SfCircularChart>
    <chart:SfCircularChart.Title>
        <Label Text="PRODUCT SALES"/>
    </chart:SfCircularChart.Title>
    <!-- code omitted for brevity -->
</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();
chart.Title = new Label()
{
    Text = "PRODUCT SALES"
};
// code omitted for brevity
this.Content = chart;

Custom PaletteBrushes

The SfCircularChart provides support to define own brushes for series with preferred order by using the PaletteBrushes property as shown in the following code example.

<chart:SfCircularChart>
    <!-- code omitted for brevity -->
    <chart:PieSeries ItemsSource="{Binding Data}" 
                     XBindingPath="XValue" 
                     YBindingPath="YValue"
                     PaletteBrushes="{Binding CustomBrushes}"/>
</chart:SfCircularChart>
public class Model
{
    public string XValue { get; set; }
    public double YValue { get; set; }
}

public class ViewModel
{
    public ObservableCollection<Model> Data { get; set; }

    public List<Brush> CustomBrushes { get; set; }
    public ViewModel()
    {
        Data = new ObservableCollection<Model>();
        // code omitted for brevity

        CustomBrushes = new List<Brush>();
        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)));
    }
}

Custom PaletteBrushes in .NET MAUI Circular Chart

Applying Gradient

The gradient for the circular chart can be set by using the PaletteBrushes property of the series with the help of the LinearGradientBrush or RadialGradientBrush.

<chart:SfCircularChart>
    <!-- code omitted for brevity -->
    <chart:PieSeries ItemsSource="{Binding Data}" 
                     XBindingPath="XValue" 
                     YBindingPath="YValue"
                     PaletteBrushes="{Binding CustomBrushes}"/>
</chart:SfCircularChart>
public class ViewModel
{
    public ObservableCollection<Model> Data { get; set; }
    public List<Brush> CustomBrushes { get; set; }

    public ViewModel()
    {
        Data = new ObservableCollection<Model>();
        // code omitted for brevity

        CustomBrushes = new List<Brush>();
        LinearGradientBrush gradientColor1 = new LinearGradientBrush();
        gradientColor1.GradientStops = new GradientStopCollection()
        {
            new GradientStop() { Offset = 1, Color = Color.FromRgb(255, 231, 199) },
            new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 182, 159) }
        };

        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) }
        };

        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) }
        };

        LinearGradientBrush gradientColor4 = new LinearGradientBrush();
        gradientColor4.GradientStops = new GradientStopCollection()
        {
            new GradientStop() { Offset = 1, Color = Color.FromRgb(221, 214, 243) },
            new GradientStop() { Offset = 0, Color = Color.FromRgb(250, 172, 168) }
        };

        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) }
        };

        CustomBrushes.Add(gradientColor1);
        CustomBrushes.Add(gradientColor2);
        CustomBrushes.Add(gradientColor3);
        CustomBrushes.Add(gradientColor4);
        CustomBrushes.Add(gradientColor5);
    }
}

Gradient support in .NET MAUI Circular Chart

Point Color Path

The SfCircularChart supports using the PointColorPath property to assign different colors to each data point. By binding this property to a color field in the data source, each segment can be dynamically styled with its own color.

The following code example demonstrates how to define a data model with a PointColor property and bind it to the chart series.

public class PointColorViewModel
{
public ObservableCollection<Model> Data { get; set; }

public PointColorViewModel()
{
    Data = new ObservableCollection<Model>()
    {
        new() { XValue = "Purchases", YValue = 1000, PointColor = Color.FromArgb("#C695F0") },
        new() { XValue = "Electronics", YValue = 1300, PointColor = Color.FromArgb("#A35DE5") },
        new() { XValue = "Investment", YValue = 2000, PointColor = Color.FromArgb("#551E8B") },
        new() { XValue = "Research", YValue = 1700, PointColor = Color.FromArgb("#8933DE") },
        new() { XValue = "Jewelry", YValue = 1100, PointColor = Color.FromArgb("#D1A8F3") },
        };
    }
}

public class Model
{
    public string? XValue { get; set; }
    public double YValue { get; set; }
    public Color? PointColor { get; set; }
}

Set ItemsSource to your data collection and map XBindingPath, YBindingPath, and PointColorPath to the corresponding model properties.

<chart:SfCircularChart>
    <!-- code omitted for brevity -->
    <chart:PieSeries ItemsSource = "{Binding Data}"
                     XBindingPath = "XValue"
                     YBindingPath = "YValue"
                     PointColorPath = "PointColor"/>
</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();

<!-- code omitted for brevity -->
PieSeries series = new PieSeries()      
{
    ItemsSource = new PointColorViewModel().Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue",
    PointColorPath = "PointColor"
};

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

PointColorPath in MAUI Chart

NOTE

The priority for color assignment is as follows: Fill>PointColorPath>PaletteBrushes.

Plotting Area Customization

SfCircularChart 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.

<chart:SfCircularChart>
    <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>
    </chart:SfCircularChart.PlotAreaBackgroundView>
    <!-- code omitted for brevity -->
</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();
AbsoluteLayout absoluteLayout = new AbsoluteLayout();
var border = new Border()
{
    Stroke = Colors.Red,
    StrokeThickness = 2
};

AbsoluteLayout.SetLayoutBounds(border, new Rect(0, 0, 1, 1));
AbsoluteLayout.SetLayoutFlags(border, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.All);
absoluteLayout.Children.Add(border);
var copyRight = new Label()
{
    Text = "Copyright @ 2001 - 2022 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);
var watermark = new Label()
{
    Text = "CONFIDENTIAL",
    Rotation = 340,
    FontSize = 80,
    FontAttributes = FontAttributes.Bold,
    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;
// code omitted for brevity
this.Content = chart;

Watermark in .NET MAUI Circular Chart