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

Multi-series bubble chart overlap


Thank you for any assistance you can provide with this issue.  I'm currently creating a bubble chart which needs to show anywhere from 1-5 "bubbles" based on an object that has 5 scalar properties all with a value of 0-10.  For example:

     Item1Intensity: 0
     Item2Intensity: 5
     Item3Intensity: 2
     Item4Intensity: 0
     Item5Intensity: 10
     X-axis: DateTime
     Y-Axis: NumberValue

The issue here is if I create one bubble series for each item, they are displayed in the order the series was added to the chart.  So in this example, the bubble size for item 5 will be the maximum, and because it is last it will render on the top layer, hiding everything beneath it.  Obviously this makes the chart useless for this type of visualization. At a minimum I need it to place whichever "ItemIntensity" is largest for the "MyDataPoint" in the back, the next largest in front and so on.  Now in a ideal world I would like it to render with each circle offset in a direction, while the center point of the whole is still in line with the DataTime on the X-axis.  Imagine a Venn Diagram for each datapoint.  If this can't be done, the next best option would be to order largest to smallest from back layer to front, and then offset each one slightly along the Y-axis.  I'm completely stuck as to how to accomplish this, there doesn't seem to be any sort of function to define which layer the individual bubble resides on.  I can't simply rearrange the order I add the series to the chart because any of the items have the largest value, which would then hide anything on a lower layer.

Thank you again for any help you can give.


8 Replies

SJ Sumathi Jayaraj Syncfusion Team April 20, 2015 11:54 AM UTC

Hi Jeff,

Thank you for contacting Syncfusion support.

We have analyzed your requirement, and in the bubble series, each bubble segment size varies based on the Size property of BubbleSeries. So we are unable to order the Series based on the bubble size. Alternatively, we can use the ScatterSeries and we can order the series based on scatter size by using ZIndex property. We have prepared a sample based on your requirement and please find the sample in the following location.

Sample: Chart_WinRT_Sample.zip

Please let us know if you require further assistance on this.

Sumathi J

JD Jeff Dalby April 30, 2015 03:32 PM UTC

Thank you.  I've been trying to make this work but in your example you have bound the scatter size to a fixed size (Size 1, Size 2, Size 3) property of the viewmodel. This means all members of the observable collection  "power" to which the control is bound ("year" and "sports") will have the same size plot of width & height. The reason I need a bubbleseries is because you can bind it's size to a property in the itemsource collection.  Each datapoint has the potential to have a different size.  

I'm stuck because I need the equivalent of XBindingPath or YBindingPath for the scatter height and width.  So to modify this example I would need a view/data model like this:

public ViewModel()
            this.power = new ObservableCollection<Entertainment>();
            DateTime yr = new DateTime(2002, 5, 1);
            power.Add(new Entertainment() { Year = yr.AddYears(1), Sports = 28, Intensity =10 });
            power.Add(new Entertainment() { Year = yr.AddYears(2), Sports = 24, Intensity =5  });
            power.Add(new Entertainment() { Year = yr.AddYears(3), Sports = 26, Intensity =7  });
            power.Add(new Entertainment() { Year = yr.AddYears(4), Sports = 27, Intensity =1  });
            power.Add(new Entertainment() { Year = yr.AddYears(5), Sports = 25, Intensity =4  });
            power.Add(new Entertainment() { Year = yr.AddYears(6), Sports = 21, Intensity =9  });
            power.Add(new Entertainment() { Year = yr.AddYears(7), Sports = 20, Intensity =2  });
            power.Add(new Entertainment() { Year = yr.AddYears(8), Sports = 29, Intensity =8  });
            power.Add(new Entertainment() { Year = yr.AddYears(9), Sports = 30, Intensity =6  });

        public ObservableCollection<Entertainment> power

    public class Entertainment
        public DateTime Year { get; set; }
        public double Sports { get; set; }
        public int Intensity {get; set; }

And then I would need to be able to bind the height and width to "Intensity."  It's probably something simple, I'm just not seeing how to do it.  Thank you again for your assitance. 

SJ Sumathi Jayaraj Syncfusion Team May 1, 2015 12:16 PM UTC

Hi Jeff,

Thanks for your update.

We would like to inform you that the Series segments could not be placed on their size. We are able to bind the Intensity property to ScatterHeight and ScatterWidth which is defined in view model using CustomTemplate of ScatterSeries as shown in the below code snippet.

Code snippet [XAML]:

<chart:ScatterSeries ItemsSource="{Binding power}" XBindingPath="Year" YBindingPath="Sports" >




<Ellipse Height="{Binding Item.Intensity1}" Width="{Binding Item.Intensity1}"

Canvas.Left="{Binding RectX}" Canvas.Top="{Binding RectY}"





We have prepared a sample based on your requirements and please find the sample in the following location.

Sample: Chart_WinRT_Sample.zip

Please let us know if you have any queries.

Sumathi J

JD Jeff Dalby May 1, 2015 05:13 PM UTC

Thanks you again for your continued assistance.  I see in your example you still have the code which attempts to sort things:

        private void SfChart_LayoutUpdated(object sender, object e)
            int index=chart.Series.Count;
            var chartSeries = from series in chart.Series orderby (series as ScatterSeries).ScatterHeight select series;
            foreach(var item in chartSeries)
                Canvas.SetZIndex(item, index);

I'm not sure if this is still supposed to do any kind of sorting since you said  "We would like to inform you that the Series segments could not be placed on their size."  which to me sounds like that code can't do the sorting. 

Regardless, the example code  you have provided has the same issue I am trying to resolve, and so will make a great way for you to see why there is a significant issue with both bubble series and scatter series charts, one that renders them unusable to present data with multiple series.

When you run the example, look at the fourth data point on the chart (Year = yr.AddYears(4), Sports = 27, Intensity2=20, Intensity3=10, Intensity1 = 1 }) 

Since there is the offset of 20 you can just barely see the BlueViolet value of 10 for Intensity3. Without the offset you wouldn't see it at all, and even with the offset if you change the value to Intensity3 = 5, the blueviolet circle will be completely hidden. Were I to give this chart to a researcher, critical data would be missed because it is hidden.  Other charting solutions handle this problem by always ensuring the largest data point is on the bottom layer and then subsequent ones are on a high layer so that no data is ever hidden.  

I really hope we can figure a way to make this work, if it can't be done and is simply a limitation of the software, I would suggest considered disallowing multiple series to be added to both scatter and bubble series charts. The last thing we need is someone missing critical data because it was hidden and they didn't realize it (which in some industries would be a very bad thing).

Again I sincerely appreciate your help and look forward to working towards a solution.

SJ Sumathi Jayaraj Syncfusion Team May 4, 2015 12:41 PM UTC

Hi Jeff,

Thanks for the update.

We are analyzing your requirements and we need some more time to implement the generic solution for your requirements. We will update you the solution in one business day probably on 5th May, 2015.

Please let us know if you have any queries.

Sumathi J

SJ Sumathi Jayaraj Syncfusion Team May 5, 2015 01:13 PM UTC

Hi Jeff,

We have analyzed the generic solution to arrange the bubble series segments based on size, but there are no workaround solution for your requirement. Alternate way to achieve this, you can apply the transparent color (opacity)/ARGB color for bubble series in order to show all layer of the segments.

We have consider your requirement “Arrange the series segment based on their size” as a feature. We have logged feature report for this and it will be implemented in any of our upcoming volume releases.

Also in single series, we are able to sort the segments based on bubble size. We have prepared the sample based on this. Please find the sample in the following location.

Sample: Chart_WinRT_Sample.zip

Please let us know if you have any further assistance on this.

Sumathi J

JD Jeff Dalby May 5, 2015 01:52 PM UTC

Thank you.  While I won't be able to show relationships between data points with this work around it does at least allow me to present a single series and not have to worry about data being overlooked.   I look forward to the updated version.

SJ Sumathi Jayaraj Syncfusion Team May 6, 2015 11:31 AM UTC

Hi Jeff,

Thanks for the update. Please let us know if you need any further assistance on this.

Sumathi J

Live Chat Icon For mobile
Up arrow icon