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

FastScatterBitmapSeries Interior color based on value


Is it possible to adjust the color of the points on the chart based on the value?  For example, a boolean value, where true = blue, false = red.  I presume it requires an IValueConverter, but I'm not quite sure how to get it working.  If this isn't the way to do it, then would it be possible for you to point me in the right direction, or perhaps provide a sample on how this may be achieved.

        <syncfusion:SfChart Margin="35,20,35,35" x:Name="flexibleAxisChart">
                <TextBlock FontSize="20"  Margin="0,0,0,40" Text="Test Chart"/>

                <syncfusion:NumericalAxis ShowGridLines="False">
                        <TextBlock Text="Y Axis" FontSize="14" Margin="5" FontWeight="Normal" />

                <syncfusion:NumericalAxis RangePadding="Round">
                        <TextBlock Text="X Axis" FontSize="14" Margin="5" FontWeight="Normal" />

            <syncfusion:FastScatterBitmapSeries EnableAnimation="True" ItemsSource="{Binding InstanceData}"
                                                XBindingPath="XValue" YBindingPath="YValue" Label="First"
                                                Interior="**** this is the what I need help with *****">

Thank you!

4 Replies

RH RH September 4, 2017 06:33 AM UTC

I just realised that what I'm asking for isn't possible given the way you do the drawing of the ellipses for the
FastScatterBitmapSeries.  It seems to be a simple loop of all the points which calls DrawEllipse.

An alternative solution presented itself, so now I have my data displaying correctly.  It just involved creating a selective list of the data points and having a separate FastScatterBitmapSeries display those points.

DS Durgadevi Selvaraj Syncfusion Team September 4, 2017 11:18 AM UTC

Thanks for contacting Syncfusion Support. 
We have analyzed your requirement(setting different color to the FastScatterBitmapSeries based on boolean value) and can achieve it using custom Palatte of the series as shown in the below code, 
<syncfusion:FastScatterBitmapSeries x:Name="series" Palette="Custom"  EnableAnimation="True" ItemsSource="{Binding Data}" ScatterWidth="5" ScatterHeight="5" 
                                                XBindingPath="XValue" YBindingPath="YValue" Label="First"  > 
ViewModel view = new ViewModel(); 
ChartColorModel colorModel = new ChartColorModel();          
foreach(var item in view.Data) 
      if (item.flag == true) 
         colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Blue)); 
         colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Red)); 
series.ColorModel = colorModel; 
Please find the output screenshot, 
We have prepared a demo sample based on your requirement and please find it from below link, 
Please let us know if you have any concerns. 
Durgadevi S 

RH RH September 4, 2017 11:54 AM UTC

Thank you very much Durgadev! The method you provided works well.  I've expanded on it to bind the ColorModel to a property in the view-model, and the processing code is in a custom Behavior to update that ColorModel property. 

Thanks again!

DS Durgadevi Selvaraj Syncfusion Team September 5, 2017 04:41 AM UTC

Hi Ramzi, 
Thanks for your update. 
We glad to know that your problem has been resolved. 
Please let us know if you need any further assistance on this. 
Durgadevi S 

Live Chat Icon For mobile
Up arrow icon