How to color individual point on a scatter chart

[David Bauer]

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]

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: 

<ContentPage.Resources> 

    <ResourceDictionary> 

        <chart:ChartColorCollection x:Key="Colors"> 

            <Color>Red</Color> 

            <Color>Gray</Color> 

            <Color>Blue</Color> 

            <Color>Maroon</Color> 

            <Color>Pink</Color> 

        </chart:ChartColorCollection> 

    </ResourceDictionary> 

</ContentPage.Resources> 

 

<chart:SfChart.Series> 

    <chart:ScatterSeries x:Name="series"  

                         ShapeType="Ellipse" 

                         ScatterHeight="10"  

                         ScatterWidth="10" 

                         XBindingPath="XValue"  

                         YBindingPath="YValue"> 

        <chart:ScatterSeries.ColorModel> 

            <chart:ChartColorModel Palette="Custom" CustomBrushes="{StaticResource Colors}"/> 

        </chart:ScatterSeries.ColorModel> 

    </chart:ScatterSeries> 

</chart:SfChart.Series> 

 

 

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]

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,

David

Attachment: Chart_Issue_dce7448a.zip

[Yuvaraj Palanisamy]

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] 

<chart:SfChart.Series> 

    <chart:ScatterSeries x:Name="series"  

                         ShapeType="Ellipse" 

                         ScatterHeight="10"  

                         ScatterWidth="10" 

                         ItemsSource="{Binding Data}" 

                         XBindingPath="XValue"  

                         YBindingPath="YValue"> 

        <chart:ScatterSeries.ColorModel> 

            <chart:ChartColorModel Palette="Custom" CustomBrushes="{Binding Colors}"/> 

        </chart:ScatterSeries.ColorModel> 

    </chart:ScatterSeries> 

</chart:SfChart.Series> 

 

ViewModel.cs 

public class ViewModel : INotifyPropertyChanged 

{        

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

    public ObservableCollection<Color> Colors { get; set; } 

    DateTime date = new DateTime(2021, 1, 1); 

 

    public ViewModel() 

    { 

        Data = new ObservableCollection<Model>() 

        { 

            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<Color>(); 

        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]

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]

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: 

<sfListView:SfListView x:Name="listView" ItemsSource="{Binding ListViewData}" ItemSize="200" > 

            <sfListView:SfListView.ItemTemplate> 

                <DataTemplate> 

                    <ViewCell> 

                        <StackLayout > 

                            <chart:SfChart Margin="0,20,16,0"  

                       HorizontalOptions="FillAndExpand" 

                       VerticalOptions="FillAndExpand"> 

 

                                <chart:SfChart.PrimaryAxis> 

                                    <chart:DateTimeAxis  PlotOffset="10" > 

                                        <chart:DateTimeAxis.Title> 

                                            <chart:ChartAxisTitle Text="DateTimeAxis"/> 

                                        </chart:DateTimeAxis.Title> 

                                        <chart:DateTimeAxis.LabelStyle> 

                                            <chart:ChartAxisLabelStyle LabelFormat="dd-MMM-yyyy"/> 

                                        </chart:DateTimeAxis.LabelStyle> 

                                    </chart:DateTimeAxis> 

                                </chart:SfChart.PrimaryAxis> 

 

                                <chart:SfChart.SecondaryAxis> 

                                    <chart:NumericalAxis RangePadding="Additional" /> 

                                </chart:SfChart.SecondaryAxis> 

 

                                <chart:SfChart.Series> 

                                    <chart:ScatterSeries x:Name="series"  

                                     ShapeType="Ellipse" 

                                     ScatterHeight="10"  

                                     ScatterWidth="10" 

                                     ItemsSource="{Binding Data}" 

                                     XBindingPath="XValue"  

                                     YBindingPath="YValue"> 

                                        <chart:ScatterSeries.ColorModel> 

                                            <chart:ChartColorModel Palette="Custom" CustomBrushes="{Binding Colors}"/> 

                                        </chart:ScatterSeries.ColorModel> 

                                    </chart:ScatterSeries> 

                                </chart:SfChart.Series> 

 

                            </chart:SfChart> 

                        </StackLayout> 

                    </ViewCell> 

                </DataTemplate> 

            </sfListView:SfListView.ItemTemplate> 

        </sfListView:SfListView> 

 

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.