amCharts align values axis' null level

Question

I have an Amchart graph with multiple charts and multiple value axis. Values may be quite different, for example, one chart's values may vary from -3000 to 3000, while another one is 0-40.

What I want is to represent all charts so they all will be visible. So, I use 'synchronizeGrid' option.

Here's my current code:

  "synchronizeGrid": true,
  "valueAxes": [{
    "id": "v1",
    "axisColor": "#FF6600",
    "axisThickness": 2,
    "axisAlpha": 1,
    "position": "left"
  }, {
    "id": "v2",
    "axisColor": "#FCD202",
    "axisThickness": 2,
    "axisAlpha": 1,
    "offset": 50,
    "position": "left"
  }, {
    "id": "v3",
    "axisColor": "#B0DE09",
    "axisThickness": 2,
    "gridAlpha": 0,
    "offset": 100,
    "axisAlpha": 1,
    "position": "left"
  }],

https://jsfiddle.net/fungxbsh/

However, you may notice that null level is not the same, i.e. each chart has null level at different grid line. Is there a way to force all charts to use the same null level?

Goran Stoyanov Goran Stoyanov · Accepted Answer · 2017-06-14T10:12:51

The only way I found to make the three axes use the same "null" value is to simply find the maximum absolute value for each of them and set it as maximum and minimum parameters while defining the ValueAxis according to the documentation of AmCharts.

So at the end, you'll have three variables to store the absolute values maxVisits, maxHits, maxViews.

Then you set the maximum and minimum parameters like this:

"valueAxes": [{
    "id": "v1",
    "axisColor": "#FF6600",
    "axisThickness": 2,
    "axisAlpha": 1,
    "position": "left",
    "maximum": maxVisits,
    "minimum": -maxVisits
  }, {
    "id": "v2",
    "axisColor": "#FCD202",
    "axisThickness": 2,
    "axisAlpha": 1,
    "position": "right",
    "maximum": maxHits,
    "minimum": -maxHits
  }, {
    "id": "v3",
    "axisColor": "#B0DE09",
    "axisThickness": 2,
    "gridAlpha": 0,
    "offset": 50,
    "axisAlpha": 1,
    "position": "left",
    "maximum": maxViews,
    "minimum": -maxViews
  }]

And finally you need to set the synchronizeGrid parameter to false again.

See the full example here.

amCharts align values axis' null level

2 Answers