We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Series Colors in Codebehind

Hi,

How can I set the Series color in codebehind?

I have below code:

PieSeries pieSeries = new PieSeries()

{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "Status",
    YBindingPath = "Total"
};


pieSeries.ShowDataLabels = true;
pieSeries.IsVisibleOnLegend = true;
pieSeries.LegendIcon = ChartLegendIconType.Rectangle;


DataEyeChart.Series.Add(pieSeries);


I want to set the Status color to Navy and the Total color to Red while the TextColor in both should be White.


Thanks,

Jassim



3 Replies

RR Raja Ramalingam Syncfusion Team March 13, 2023 11:55 AM UTC

Hello Jassim,


We would like to inform you that by default, the series palette will be applied to the legend items. However, we assume that you would like to set custom color for the legend icons. To achieve this, we recommend using ItemTemplate support of the chart legend, which can be implemented using the code snippet provided below.


ChartLegend chartLegend = new ChartLegend();

 

DataTemplate dataTemplate = new DataTemplate(() =>

{

    HorizontalStackLayout layout = new HorizontalStackLayout();

    layout.Padding = 2;

    BoxView boxView = new BoxView();

    boxView.HeightRequest = 12;

    boxView.WidthRequest = 12;

    boxView.Color = Colors.Navy;

 

    Label label = new Label() { VerticalOptions=LayoutOptions.Center,VerticalTextAlignment=TextAlignment.Center, Padding=2, TextColor=Colors.White};

 

    label.SetBinding(Label.TextProperty, "Item.Product", stringFormat: "{0}");

 

    layout.Add(boxView);

    layout.Add(label);

 

    return layout;

});

 

chartLegend.ItemTemplate = dataTemplate;

       

sfCircularChart.Legend = chartLegend;


To change the color of the series, please utilize the Fill property of the series. For modifying the appearance of the data labels, please make use of the ChartDataLabelStyle property of the CircularDataLabelSettings, as demonstrated in the code snippet below.


CircularDataLabelSettings circularDataLabelSettings = new CircularDataLabelSettings();

ChartDataLabelStyle chartDataLabelStyle = new ChartDataLabelStyle();

chartDataLabelStyle.TextColor = Colors.White;

circularDataLabelSettings.LabelStyle = chartDataLabelStyle;

 

pieSeries.DataLabelSettings= circularDataLabelSettings;



Additionally, to assign custom palette colors to the series segments, you can utilize the 'PaletterBrushes' property.


We have also included an image of the output as per your request. Please let us know if this meets your expectations or if you have any other requirements.


Output:



Best regards,

Raja.


Attachment: LegendSample_45a473b2.zip


JR Jassim Rahma March 13, 2023 03:47 PM UTC

Thanks.

What I want is something like the attached image if it can be done at XAML or code behind, whatever is quicker and cleaner.


Screenshot 2023-03-13 at 7.47.28 PM.png



RR Raja Ramalingam Syncfusion Team March 14, 2023 04:59 AM UTC

Hello Jassim,


We have achieved your request by utilizing DoughnutSeries and PaletteBrushes. Please refer to the sample provided for your consideration. If this solution meets your needs, kindly inform us.


<chart:DoughnutSeries StartAngle="270" EndAngle="630" PaletteBrushes="{Binding DoughnutColors}"

                        StrokeWidth="2" Stroke="White" InnerRadius="0.80" XBindingPath="Product"

                        YBindingPath="SalesRate" ItemsSource="{Binding Data}">

</chart:DoughnutSeries>


DoughnutColors = new ObservableCollection<Brush>()

{

    new SolidColorBrush(Colors.Blue),

    new SolidColorBrush(Colors.Red),

};



Output:



Best regards,

Raja.


Attachment: LegendSample_4c45e696.zip

Loader.
Up arrow icon