How to color individual point on a scatter chart

Question

Hello,I am trying to color the points on a scatter chat. I am creating a ChartColorCollection and adding the colors that I want. All of the points on my scatter chart are the first color added.Is there a way to individually color each point?Thanks,David

Yuvaraj Palanisamy · Answer

Hi David Bauer, Greetings from Syncfusion. We would like to let you that the requirement “Scatter series with individual point color” has been achieved with the help of Palette and CustomBrushes property of ColorModel in chart series. Please find the code example below. Code Snippet: Red Gray Blue Maroon Pink For more details, please refer the below link. https://help.syncfusion.com/xamarin/charts/appearance#apply-palette-for-series https://www.syncfusion.com/kb/12215/how-to-customize-the-segment-color-based-on-the-y-value-in-xamarin-forms-charts Regards, Yuvaraj.

David Bauer · Answer

Hello,Thank you for the quick response. The solution above is not what I am looking for. I implemented the exact solution above and all of the points on my chart are the same color. I will include a picture of what my chart looks like. I would like to be able to color each point individiually however I want to. Some points I want red and some points I want blue, some points I want yellow and some I want green . I don't want this to be based on a certain x or y value. I want to individually assign them.Thanks,DavidAttachment: Chart_Issue_dce7448a.zip

Yuvaraj Palanisamy · Answer

Hi David Bauer,You can achieve your requirement “Scatter segment with individual color” with the help of ColorModel property of ChartSeries. And setting of Palatte property to Custom and CustomBrushes to color collection for ChartColorModel. Code Snippet: [MainPage.xaml] ViewModel.cs public class ViewModel : INotifyPropertyChanged { public ObservableCollection Data { get; set; } public ObservableCollection Colors { get; set; } DateTime date = new DateTime(2021, 1, 1); public ViewModel() { Data = new ObservableCollection() { new Model(date.AddMonths(0), 17, Color.Green), new Model(date.AddMonths(1), 24, Color.Red), new Model(date.AddMonths(1), 12, Color.Green), new Model(date.AddMonths(2), 17, Color.Blue), new Model(date.AddMonths(3), 24, Color.Yellow), new Model(date.AddMonths(3), 18, Color.Red), new Model(date.AddMonths(4), 9, Color.Green), new Model(date.AddMonths(5), 15, Color.Blue), new Model(date.AddMonths(6), 19, Color.Yellow) }; Colors = new ObservableCollection(); foreach (var item in Data) { Colors.Add(item.SegmentColor); } } public class Model { public DateTime XValue { get; set; } public double YValue { get; set; } public Color SegmentColor { get; set; } public Model(DateTime date, double yValue, Color segmentColor) { XValue = date; YValue = yValue; SegmentColor = segmentColor; } } Also, we have attached the sample for your reference. Please find the sample from the below link. Sample: https://www.syncfusion.com/downloads/support/forum/168002/ze/CustomBrush-750148294 Output: For more details, please refer the below link https://help.syncfusion.com/xamarin/charts/appearance#apply-palette-for-series If you want to separate the scatter color based on the YValue, please refer the below https://www.syncfusion.com/kb/12215/how-to-customize-the-segment-color-based-on-the-y-value-in-xamarin-forms-charts Regards, Yuvaraj.

David Bauer · Answer

Hello,I have tried to implement the above solution but it is still not working for me. It always colors all of the points on my scatter plot the first color I add. Even when I do a predefined palette, all of the points get colored the same color.The difference between mine and the sample provided is that I have an sflistview so that I can display multiple charts. The data bound to the list view is an observable collection x. x has another observable collection in it y that holds all of the details for each point.Any help would be greatly appreciated.-David

Yuvaraj Palanisamy · Answer

Hi David Bauer, We have checked your query and we have prepared the sample with SfChart inside the SfListView for your requirement “scatter segment with individual color” with the help of custom palette support. Please find the code example below. Code Snippet: Also, we have attached the complete sample for your reference. Please find the sample from the below link. Sample: https://www.syncfusion.com/downloads/support/forum/168002/ze/ChartSample-695303777 Output: For more details, please refer the below link https://www.syncfusion.com/kb/11341/how-to-add-the-xamarin-forms-charts-in-a-listview Regards, Yuvaraj.