How to customize a bubble series to use color and opacity as an additional possibility to show information.

[Sascha]

Hello Syncfusion Support!

We are trying to implement a bubble series. We need to have full control over the color and the opacity of each shape. Is this possible?

Your samples only show how to use x,y, and size.

Thank you very much!

Regards,

Sascha

[Muneesh Kumar G]

Hi Sascha, 

 

Greetings from Syncfusion, we have analyzed your requirement and you can achieve this by using below solutions.  

 

Solution 1: By setting Interior property with Alpha value you can customize the color and opacity of whole segments as per the below code snippet.  

 

Code snippet 

                <chart:BubbleSeries XBindingPath="XValue"  

                                Size="Size" Interior="#4DFF0000" 

                                YBindingPath="YValue" ItemsSource="{Binding Data}"/> 

 

Here 4D-Alpha (30%), FF- Red, 00-Green, 00-Blue. You can change the alpha and color codes based on your application.  

 

Screenshot:  

 

 

Solution 2: By setting SegmentColorPath in series, you can customize each segment color with opacity as per the below code snippet.  

 

Code snippet 

 

            <chart:BubbleSeries XBindingPath="XValue"  

                                Size="Size"  SegmentColorPath="Brush" 

                                YBindingPath="YValue" ItemsSource="{Binding Data}"/> 

 

public class Model 

    { 

        .. 

 

        public Brush Brush { get; set; } 

    } 

 

    public class ViewModel 

    { 

        public ViewModel() 

        { 

            GenerateData();            

        } 

 

        public void GenerateData() 

        { 

            Data = new ObservableCollection<Model>(); 

            Random rd = new Random(); 

 

            Data.Add(new Model() 

            { 

                XValue = 1, 

                YValue = rd.Next(0, 50), 

                Size = rd.Next(0, 10), 

                Brush = new SolidColorBrush(Color.FromArgb(40, 255, 0, 0)) 

            }); 

            Data.Add(new Model() 

            { 

                XValue = 2, 

                YValue = rd.Next(0, 50), 

                Size = rd.Next(0, 10), 

                Brush = new SolidColorBrush(Color.FromArgb(140, 0, 255, 0)) 

            }); 

            Data.Add(new Model() 

            { 

                XValue = 3, 

                YValue = rd.Next(0, 50), 

                Size = rd.Next(0, 10), 

                Brush = new SolidColorBrush(Color.FromArgb(240, 255, 0, 0)) 

            }); 

 

            Data.Add(new Model() 

            { 

                XValue = 4, 

                YValue = rd.Next(0, 50), 

                Size = rd.Next(0, 10), 

                Brush = new SolidColorBrush(Color.FromArgb(100, 0, 0, 255)) 

            }); 

 

        } 

 

        private ObservableCollection<Model> data; 

 

        public ObservableCollection<Model> Data 

        { 

            get { return data; } 

            set { data = value;  } 

        } 

 

         

        

    } 

 

Here we have declared brush property in model and defined color for that property with data initialization. You can customize the values as per your application.  

 

Screenshot:  

 

 

 

We have prepared a sample based on this, please find the sample from the following location.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/140914/ze/WPF_Sample998297859 

 

UG : https://help.syncfusion.com/wpf/sfchart/styling-and-customization#segmentcolorpath 

 

Solution 3: By setting custom palette for series you can customize each segment color with opacity as per the below code snippet. 

 

Code snippet 

<chart:BubbleSeries XBindingPath="XValue"  

                                Size="Size"  Palette="Custom" 

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

                <chart:BubbleSeries.ColorModel> 

 

                    <chart:ChartColorModel> 

 

                        <chart:ChartColorModel.CustomBrushes> 

 

                            <SolidColorBrush Color="#4DFF0000"/> 

 

                            <SolidColorBrush Color="#FDFFF000"/> 

 

                            <SolidColorBrush Color="#BF0FFFF0"/> 

 

                            <SolidColorBrush Color="#8DFF00F0"/> 

 

                        </chart:ChartColorModel.CustomBrushes> 

 

                    </chart:ChartColorModel> 

 

                </chart:BubbleSeries.ColorModel> 

            </chart:BubbleSeries> 

 

 

Screenshot: 

 

 

UG: https://help.syncfusion.com/wpf/sfchart/styling-and-customization#custom-palette 

 

Hope it helps.  

 

Regards, 

Muneesh Kumar G.