Hi Gitesh,
Thanks for using Syncfusion product.
We have analyzed your query. We can differentiate the overlapping bubble by changing the opacity. Please find the below code example
[JS]
$("#container").ejChart(
{
load: "loadTheme",
seriesRendering: "seriesRender",
});
function seriesRender(sender) {
var x = [];
var y = [];
for (var i = 0; i < sender.data.series.points.length; i++) {
x.push(sender.data.series.points[i].x);
y.push(sender.data.series.points[i].y);
}
var a = arrhasDup(x);
var b = arrhasDup(y);
index1 = x.indexOf(a[0]);
index2 = y.indexOf(b[0]);
if (index1 == index2) {
sender.data.series.points[index1].opacity = 0.5;
}
}
function arrhasDup(x) {
var a = [];
n = x.length;
for (i = 0; i < n; i++) {
for (j = i + 1; j < n; j++) {
if (x[i] == x[j])
a.push(x[j]);
}
}
return a;
}
In the above code we have checked whether bubbles are overlapping or not in the seriesRendering event. If the bubbles are overlapped means we have set the opacity of the bubble as 0.5
Please find the below screenshot
In the above screen shot opacity of the overlapped bubble has been changed.
We have prepared the sample as per your requirement. Please find the sample from below location
Sample Link : http://www.syncfusion.com/downloads/support/forum/120033/ze/bubble1184476818
Please let us know if you have any queries.
Regards,
Sanjith K.