Search code examples
javascriptextjsextjs6extjs6-classicextjs-chart

Increment Grid Ticks by 1

I want my Y-Axis on my grid to increment by 1 (for example: 1,2,3,4,5 and so on).

Currently I have it set like this:

axes: [{
    type: 'numeric',
    position: 'left',
    minimum: 0,
    increment: 1,
    title: {
        text: '',
        fontSize: 15
    },
    fields: 'total',
    grid: true
},

In my test data, the field 'total' current largest value is 3. If I set the 'maximum' on the axes to 3, it goes into decimal places and its increment changes to 0.2, but if I set it to 10, it increments correctly.

Solution

  • Set both minimum and maximum property. Add property majorTickSteps and set that to the difference between minimum and maximum. So: minimum: 0, maximum: 3, majorTickSteps: 3.