CODEWITHSUNDEEP
javascriptamcharts
Aayush Kothari
Aayush Kothari

Reputation: 504

AmSerialChart ValueAxis Start Value and Increments

I've implemented a regular AmSerial Chart to visualise number of users using an app per month. The library, however seems to rescale by changing the min value on Value Axis to larger values as the highest value keeps increasing. What we want is to set Value axis' starting value to 0 and also be able to change the magnitude of increments along the axis, for example, [0, 1000,2000,...] or [0,5000,10000,...]

I've tried to look at the docs on their site and the only thing that let me customise Value axis was ValueAxesSettings, but it doesn't let me do the above.

Upvotes: 2

Views: 412

Answers (1)

martynasma
martynasma

Reputation: 8595

For the record, ValueAxesSettings is a feature for Stock Chart product and is completely ignored by regular serial charts.

To set the scale to start from 0 for value axis, use its minimum setting.

As far as increments go, you have several options.

Option 1: Manipulate grid count

If you know the range of your values, you can set both minimum and maximum properties of the value axis, then set autoGridCount: false as well as gridCount so that range divides up into increments that you need.

For example, if you have a range of values from 0 to 1000 and want to display a label/grid line at every 1000, you could do something like this:

"valueAxes": [{
  "minimum": 0,
  "maximum": 10000,
  "autoGridCount": false,
  "gridCount": 10
}]

Option 2: Use guides

If you need absolute control over which labels are placed, you can disable value axis' labels (labelsEnabled: false) and grid (gridAlpha: 0) and use guides.

Those are horizontal lines with labels, placed at values you specify:

"valueAxes": [ {
  "labelsEnabled": false,
  "gridAlpha": 0,
  "guides": [{
    "value": 5000,
    "label": "5000",
    "inside": false,
    "lineAlpha": 0.5
  }, {
    "value": 10000,
    "label": "10000",
    "inside": false,
    "lineAlpha": 0.5
  }, {
    "value": 15000,
    "label": "15000",
    "inside": false,
    "lineAlpha": 0.5
  }]
} ]

The above will place lines and labels at values 5000, 10000 and 15000.

Upvotes: 2

Related Questions