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.

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

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

MK Muneesh Kumar G Syncfusion Team 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


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


 public class Model      {          ..            public Brush Brush { get; set; }      }        public class ViewModel      {          public ViewModel()          {              GenerateData();                     }            public void GenerateData()          {              Data = new ObservableCollection();              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 data;            public ObservableCollection 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


Screenshot:

Hope it helps.

Regards,
Muneesh Kumar G.