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