Changing colour of Syncfusion pie chart in .net maui

Question

I am using Syncfusion pie chart in my .net maui project however I am really struggling to change the colours of the segments as I am so new to the platform. Here is my code:

                           <chart:SfCircularChart>

                            <chart:PieSeries ItemsSource="{Binding ProjectData}" XBindingPath="Project" YBindingPath="Amount" EnableTooltip="True" StartAngle="180" EndAngle="360" />
                             
                        </chart:SfCircularChart>

The graph appears like this:

I have found various Xamarin forms tutorials and examples using C# but surely there is an easier way to change the colours on the frontend?

Answer 1

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TPMaui3.Views.vGraphe"
xmlns:drawable="clr-namespace:TPMaui3"
Title="Historique">
<ContentPage.Resources>
<drawable:GraphicsDrawable x:Key="MyDrawable" />
</ContentPage.Resources>
<VerticalStackLayout Spacing="20" Margin="10">
<Label
Text="Historique"
x:Name="lbTemp"
VerticalOptions="Center"
HorizontalOptions="Center" FontSize="Medium" TextColor="{StaticResource Primary}"/>
<Button
x:Name="btTemp"
Text="Afficher"
Clicked="AfficherGraph"
HorizontalOptions="Center" />
<HorizontalStackLayout x:Name="HSL" Spacing="10" Margin="10" HorizontalOptions="Center"
HeightRequest="200">
<Image Source="axis.PNG" />
5
<Label
Text=""
x:Name="lb1"
VerticalOptions="End"
BackgroundColor="{StaticResource Secondary}"
WidthRequest="20" HeightRequest="10"/>
<Label
Text=""
x:Name="lb2"
VerticalOptions="End"
BackgroundColor="{StaticResource Secondary}"
WidthRequest="20" HeightRequest="10"/>
<Label
Text=""
x:Name="lb3"
VerticalOptions="End"
BackgroundColor="{StaticResource Secondary}"
WidthRequest="20" HeightRequest="10"/>
<Label
Text=""
x:Name="lb4"
VerticalOptions="End"
BackgroundColor="{StaticResource Secondary}"
WidthRequest="20" HeightRequest="10"/>
<Label
Text=""
x:Name="lb5"
VerticalOptions="End"
BackgroundColor="{StaticResource Secondary}"
WidthRequest="20" HeightRequest="10"/>
</HorizontalStackLayout>
</VerticalStackLayout>
</ContentPage>
vGraphe.xaml.cs
using System.Diagnostics.Metrics;
using System.Drawing;
using System.Linq.Expressions;
using System.Text.Json;
using TPMaui3.Models;
namespace TPMaui3.Views;
public partial class vGraphe : ContentPage
{
public vGraphe()
{
InitializeComponent();
}
private async void AfficherGraph(object sender, EventArgs e)
{
Uri uri = new Uri("jjjjjjjjjjjjj");
try
{
HttpClient client = new();
HttpResponseMessage response = await client.GetAsync(uri);
if (response.IsSuccessStatusCode)
{
var result = await response.Content.ReadAsStringAsync();
double dTaux = HSL.HeightRequest / 20;
double dTest = ReadValue(result, "TMn0");
int iTest = (int)dTest;
6
lb1.HeightRequest = (int)(ReadValue(result, "TMn0") * dTaux);
lb2.HeightRequest = (int)(ReadValue(result, "TMn1") * dTaux);
lb3.HeightRequest = (int)(ReadValue(result, "TMn2") * dTaux);
lb4.HeightRequest = (int)(ReadValue(result, "TMn3") * dTaux);
lb5.HeightRequest = (int)(ReadValue(result, "TMn4") * dTaux);
}
}
catch (Exception ex)
{
await this.DisplayAlert("Error", ex.Message, "OK");
}
}
private double ReadValue(String sXml, String sFlag)
{
try
{
String sFlag1 = "<a:" + sFlag + ">";
String sFlag2 = "</a:" + sFlag + ">";
sXml = sXml.Substring(sXml.IndexOf(sFlag1) + sFlag1.Length);
sXml = sXml.Substring(0, sXml.IndexOf(sFlag2));
sXml = sXml.Replace(",", ".");
double dVal = Convert.ToDouble(sXml);
return dVal;
}
catch { }
return 0;
}
}

Answer 2

Color in piechart should be setted as a data like the code below. In frontend it could not define each part's color in the chart.

  public partial class MainPage : ContentPage
    {
        List<Entry> entries = new List<Entry>
        {
            new Entry(200)
            {
                Color=SKColor.Parse("#FF1943"),
                Label ="January",
                ValueLabel = "200"
                
            },
            new Entry(400)
            {
                Color = SKColor.Parse("00BFFF"),
                Label = "March",
                ValueLabel = "400"
                
            },
            new Entry(-100)
            {
                Color =  SKColor.Parse("#00CED1"),
                Label = "Octobar",
                ValueLabel = "-100"
            },
            };
        public MainPage()
        {
            InitializeComponent();


            Chart1.Chart = new PieChart() { Entries = entries };

        }
    }

Answer 3

You need to change your colours in the ViewModel:

        public ISeries[] PieOne { get; set; } = new ISeries[]
        {
        new PieSeries<double> { Values = new List<double> { DegreeStudents }, InnerRadius = 50, Fill = new SolidColorPaint(new SKColor(93, 58, 243)),  Name = "Degree" },
        new PieSeries<double> { Values = new List<double> { DiplomaStudents }, InnerRadius = 50, Fill = new SolidColorPaint(new SKColor(234, 174, 249)),  Name = "Diploma" },
        };

The SKColor attribute should be used to change the colour of the graph, while needing to set FIll = SKColor(), inside SKColor can be hex or rgb.

Your code that you pasted is only for displaying the chart on the View and you cannot set any attributes to change the appearance of the chart on the View.

Answer 4

You can customize the Syncfusion pie chart segments colors by setting PaletteBrushes property in PieSeries as per the below code snippet.

public class ChartViewModel
{
    public List<Sales> ProjectData { get; set; }
    public List<Brush> CustomBrushes { get; set; }
    public ChartViewModel()
    {
        ProjectData = new List<Sales>()
        {
            new Sales(){Project = "iPad", Amount = 25},
            new Sales(){Project = "iPhone", Amount = 35},
            new Sales(){Project = "MacBook", Amount = 15},
            new Sales(){Project = "Mac", Amount = 5},
            new Sales(){Project = "Others", Amount = 10},
        };

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

 <Grid>
        <Grid.BindingContext>
            <local:ChartViewModel/>
        </Grid.BindingContext>
        
        <chart:SfCircularChart>

            <chart:PieSeries ItemsSource="{Binding ProjectData}" 
                             PaletteBrushes="{Binding CustomBrushes}"
                             XBindingPath="Project" YBindingPath="Amount" 
                             EnableTooltip="True" 
                             StartAngle="180" EndAngle="360" />

        </chart:SfCircularChart>
    </Grid>