Logarithmic ticks callback breaks autoSkip

[MusikAnimal]

I use a callback to localize the number format of the y-axis ticks on a line chart. For a logarithmic scale, it appears using a callback overrides the built-in autoSkip feature, and the ticks end up overlapping each other.

Logarithmic chart with default options:
http://codepen.io/MusikAnimal/pen/LZRoMN
This shows fine, except the numbers are in exponential format, when I need the full numbers with delimiters.

The same logarithmic chart with a callback:
http://codepen.io/MusikAnimal/pen/MejdXL
The labels overlap. autoSkip seems to have no effect, nor does maxTicksLimit.

[etimberg]

This is because the default callback only shows certain numbers: https://github.com/chartjs/Chart.js/blob/master/src/scales/scale.logarithmic.js#L12-L20

[etimberg]

Closing since this is as design IMO and my answer above is why it happens

[MusikAnimal]

No problem, thank you for the assistance nonetheless!

For anyone else reading this, I ended up making my own callback which seems to work well:

callback: (value, index, arr) => {
  const remain = value / (Math.pow(10, Math.floor(Chart.helpers.log10(value))));

  if (remain === 1 || remain === 2 || remain === 5 || index === 0 || index === arr.length - 1) {
    return (new Number(value)).toLocaleString();
  } else {
    return '';
  }
}

[crwh05]

I am using @MusikAnimal s callback but I still get overlapping ticks at the top of the scale.

Does anyone have any advice how to solve this?

I would like the 200 not to be shown as it overlaps with the 300. Is there some way to look ahead to see if it is going to overlap and not show it?

[crwh05]

The worst case scenario, can I just not show the last tick?

[MusikAnimal]

@crwh05

The worst case scenario, can I just not show the last tick?

I haven't tested it, but I think this might get rid of the last tick:

callback: (value, index, arr) => {
  if (index === arr.length - 1) return ''; // don't show the last tick

  const remain = value / (Math.pow(10, Math.floor(Chart.helpers.log10(value))));

  if (remain === 1 || remain === 2 || remain === 5 || index === 0) {
    return (new Number(value)).toLocaleString();
  } else {
    return '';
  }
}

You could also try tweaking the remain === whatever conditions.

[crwh05]

I just removed the index === 0 in the end. Strangely enough, the index goes from high to low.