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 e.g. 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?

martynasma martynasma · Accepted Answer · 2015-08-03T19:26:33

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>

Scaling bubbles in AmCharts Bubble Chart

1 Answers