I'm creating a bubble map and am having a problem with the smallest bubble sizes which are not behaving as I expect. After searching a bit in the documentation to understand the problem, I found this: https://api.highcharts.com/highcharts/plotOptions.bubble.sizeBy
I don't want to change the setting for 'sizeBy' from its default Area (that makes the most sense for my data) but there is helpful example alongside the API entry in JSFiddle:
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'Highcharts Bubbles Sizing'
},
subtitle: {
text: 'Smallest and largest bubbles are equal, intermediate bubbles different.'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
series: [{
data: [
[1, 1, 1],
[2, 2, 2],
[3, 3, 3],
[4, 4, 4],
[5, 5, 5]
],
sizeBy: 'area',
name: 'Size by area'
}, {
data: [
[1, 1, 1],
[2, 2, 2],
[3, 3, 3],
[4, 4, 4],
[5, 5, 5]
],
sizeBy: 'width',
name: 'Size by width'
}]
});
Keeping in mind that I'm only nterested in showing by Area (the default), what I don't understand about the example is why the first bubble (which has a z value of 1) is so small compared to the other bubbles. It's area should be 0.5 times the area of the second bubble (which has a z value of 2). But it's much much smaller (like 1/10 of the area). All of the other bubbles however seem to be proportionally correct — it's really just that first bubble.
So my question is — why is the first bubble so small and is there a way to prevent this from happening so that all of the bubbles are proportionate according to area?
Many thanks in advance,
David
Follow-up:
I created a more extreme example in jsFiddle with only two bubbles — one is half the value of the other so it's area (or width) should also be half — but it's not.
https://jsfiddle.net/2m75nwhf/1/
I could be completely misunderstanding the API but I thinking now this is probably just a bug?
You are looking for the minSize property. In Highcharts API we can read:
minSize: number, string
Minimum bubble size. Bubbles will automatically size between the minSize and maxSize to reflect the z value of each bubble. Can be either pixels (when no unit is given), or a percentage of the smallest one of the plot width and height.
Live demo: https://jsfiddle.net/BlackLabel/5kspqn1h/
API Reference:
The way I've fixed this for the moment is I create a fake data point with a value that is lower than other values in the dataset. I'm posting here in case anyone else has a similar problem. If there was a way to do this through the API, that would be preferable and I would remove this code. I will keep searching for a more elegant solution.
After the bubble map is drawn, I then remove the fake data point.
So I have something like;
var minValue = 0.0000000001; // some fake minimum value (or better, calculate it programmatically from the actual data)
data.push({. // this is how I am structuring the data for my data set
id: "fakeMinValue",
lat: 50, // these lat/lon values give a location somewhere in France — it's important to make sure the lon/lat values are on within your actual map
lon: 2,
z: minValue
})
Then I draw my map...
var bubbleMap = Highcharts.mapChart(containerID, {
...
}
and after it's drawn, in the code I then remove the fake data point with this command:
bubbleMap.get('fakeMinValue').remove(false); // 'false' prevents HighMaps from redrawing the map without the fake data point which would otherwise defeat the purpose