amCharts Bubble Chart axis questions

Question

I'm completely new to javascript charting and am trying to understand how to set the two axis of this chart to have 0 be the bottom left with no negative values.

I've tried playing with values randomly and can change many of the settings but I just can't figure out setting the chart x and y measurements to be positive only.

HTML

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

JS

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "xy",
  "theme": "none",
  "balloon":{
   "fixedPosition":true,
  },
  "dataProvider": [ {
    "y": 10,
    "x": 14,
    "value": 59,
    "y2": -5,
    "x2": -3,
    "value2": 44
  }, {
    "y": 5,
    "x": 3,
    "value": 50,
    "y2": -15,
    "x2": -8,
    "value2": 12
  }, {
    "y": -10,
    "x": 8,
    "value": 19,
    "y2": -4,
    "x2": 6,
    "value2": 35
  }, {
    "y": -6,
    "x": 5,
    "value": 65,
    "y2": -5,
    "x2": -6,
    "value2": 168
  }, {
    "y": 15,
    "x": -4,
    "value": 92,
    "y2": -10,
    "x2": -8,
    "value2": 102
  }, {
    "y": 13,
    "x": 1,
    "value": 8,
    "y2": -2,
    "x2": 0,
    "value2": 41
  }, {
    "y": 1,
    "x": 6,
    "value": 35,
    "y2": 0,
    "x2": -3,
    "value2": 16
  } ],
  "valueAxes": [ {
    "position": "bottom",
    "axisAlpha": 0
  }, {
    "minMaxMultiplier": 1.2,
    "axisAlpha": 0,
    "position": "left"
  } ],
  "startDuration": 0,
  "graphs": [ {
    "balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
    "bullet": "circle",
    "bulletBorderAlpha": 0.2,
    "bulletAlpha": 0.6,
    "lineAlpha": 0,
    "fillAlphas": 0,
    "valueField": "value",
    "xField": "x",
    "yField": "y",
    "maxBulletSize": 100
  }, {
    "balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
    "bullet": "diamond",
    "bulletBorderAlpha": 0.2,
    "bulletAlpha": 0.6,
    "lineAlpha": 0,
    "fillAlphas": 0,
    "valueField": "value2",
    "xField": "x2",
    "yField": "y2",
    "maxBulletSize": 100
  } ],
  "marginLeft": 46,
  "marginBottom": 35,
  "export": {
    "enabled": true
  }
} );

CSS

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

martynasma martynasma · Accepted Answer · 2015-11-24T20:46:37

To force your a value axis to start at particular value use its minimum setting.

So in your case your code should look like this:

"valueAxes": [ {
  "position": "bottom",
  "axisAlpha": 0,
  "minimum": 0
}, {
  "minMaxMultiplier": 1.2,
  "axisAlpha": 0,
  "position": "left",
  "minimum": 0
} ],

amCharts Bubble Chart axis questions

1 Answers