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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

140914 Nov 14,2018 05:55 AM UTC Nov 14,2018 07:00 AM UTC WPF 1
loading
Tags: Chart
Sascha
Asked On November 14, 2018 05:55 AM UTC

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 [Syncfusion]
Replied On November 14, 2018 07:00 AM UTC

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.  
 
 
 
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: 
 
 
 
Hope it helps.  
 
Regards, 
Muneesh Kumar G. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;