Scaling bubbles in AmCharts Bubble Chart

Question

I am currently in the process of creating a bubble chart using AmCharts. For the most part the process is quite easy.

I however the bubbles AmCharts create seem to be very weirdly scaled in proportion to each other. If I eg have two bullets with value "9" and "3", no matter what I do the graph will set the bullet with value "9" to be as large as allowed by maxBulletSize (this can be wider than a column which is also just weird) and the other as small as possible.

What I would like is to have the values fall in the range from 1 to 10, where 10 should fill out approx. a column (it should however never be bigger than a column as it can then overlap with other bubbles). Thus even though I may not actually have a bullet of size "1", size "3" should remain the same.

Is this possible?

Answer 1

Normally, this is not possible using just configuration options. However, you can apply this simple workaround: just add two invisible bullets: one with value 1 and the other 10. It will ensure that the scale will always be the same for any in-between values.

 var chart = AmCharts.makeChart( "chartdiv", { "type": "xy", "dataProvider": [ { "y": 10, "x": 14, "value": 3 }, { "y": 5, "x": 3, "value": 6 }, { "y": 10, "x": 8, "value": 4 }, { "y": 0, "x": 0, "value": 1, "alpha": 0 }, { "y": 0, "x": 0, "value": 10, "alpha": 0 } ], "graphs": [ { "balloonText": "[[value]]", "balloonFunction": function(item) { // using this in order not to display balloons for // hidden bullets if (item.alpha === 0) return ""; return "" + item.dataContext.value; }, "bullet": "circle", "lineAlpha": 0, "valueField": "value", "xField": "x", "yField": "y", "alphaField": "alpha", "minBulletSize": 10, "maxBulletSize": 100 } ] } ); 

 #chartdiv { width: 100%; height: 300px; } 

 <script src="http://www.amcharts.com/lib/3/amcharts.js"></script> <script src="http://www.amcharts.com/lib/3/xy.js"></script> <div id="chartdiv"></div>