Posted in Uncategorized

Logarithmic chart defaults axis values to scientific format (i.e. 5e+2). But it is not clear how to change the number format.

   February 24, 2021  4 Comments on Logarithmic chart defaults axis values to scientific format (i.e. 5e+2). But it is not clear how to change the number format.

Created logarithmic chart using:

options = {
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom'
            }],
            yAxes: [{
                type: 'logarithmic',
                position: 'left'
            }]
        }
    }

This automatically changes the axis values to scientific format. (I don’t think this is desired behavior.) I searched through the docs and could not figure out how to set the axis values to regular format (i.e. 100000). Or even better: 100,000.

Googling I found the custom Javascript formatter callback function, but that doesn’t seem like a good solution.

How to set the axis values (labels) format?

Author: Fantashit

4 thoughts on “Logarithmic chart defaults axis values to scientific format (i.e. 5e+2). But it is not clear how to change the number format.”

  1. OK, thanks for the help.

    It seems that this will convert to a more human readable format:

    return tick.toLocaleString()

  2. In the current version of ChartJS you loose the log scale, with this implementation all works as expected.

    callback: function(...args) {
  const value = ChartJS.Ticks.formatters.logarithmic.call(this, ...args);
  if (value.length) {
    return Number(value).toLocaleString()
  }
  return value;
}

  3. Hi! The above worked great for me, except that I had to change this line:

    const value = ChartJS.Ticks.formatters.logarithmic.call(this, ...args);

    with

    const value = Chart.Ticks.formatters.logarithmic.call(this, ...args);

    So ChartJS is replaced with Chart (took me a short while to figure it out, I hope this helps others).

Comments are closed.