Chartist-js: When Y axis numbers hit a million plus it cuts off the the million

[imkevinabraham]

I have a graph which on the Y axis is in the millions. Im using the SVG animation line graph and it seems to cut off the million number. As you can see in the image.

Is there a way to dynamically solve this issue? e.g going from million to 10 million to 100 million + the Y axis width automatically scales?

[laurenancona]

@imkevinabraham: Not dynamically, but you can add padding in the chartOptions:

chartPadding: {
  top: 0,
  right: 0,
  bottom: 0,
  left: 10
}

and then tweak label offset in the options for that axis until you have enough room that it's not cut off:

axisY: {
  labelOffset: {
    x: -10,
    y: 0
  }
}

Alternatively, you might use a label interpolation function for that axis under chartOptions. I like this when scale is in the millions because I think it's easier to read than so many trailing 0s:

axisY: {
  labelInterpolationFnc: function(value) {
    // do whatever math operation you want here
    return value / 1000000 + 'm';
  }
}

You might also adjust these values under responsiveOptions, which wouldn't quite be dynamic in the way you meant, but you could, for example, only have the labels abbreviated as in the 2nd example above on smaller screen sizes, and adjust padding as in the 1st example to show the full value on larger screens.

[zonakusu]

Another option is to use the human format lib from NPM. It will also reformat it into 1M or 1K for 1000 :)

[gionkunz]

@laurenancona @zonakusu thanks for the great suggestions :-) @imkevinabraham I hope you've figured out a way to adjust your axis settings so that the numbers fit. I really like the suggestion of @laurenancona to make the numbers more readable though. That fits the core claim of chartist to be responsive and user friendly ;-)

Please re-open if you're still facing some issues.
Cheers