Chart.js: 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.

[adamdriscoll]

When implementing this callback the tooltips flicker really badly when hovering over a point in a line chart. Has anyone noticed this before?

[pratikdhavale]

Horizontal lines remains on chart for skipped labels. So along with labels how to remove those lines as well?

[ac-arecabay]

Just stumbled across this today as well - with logarithmic set to true, the autoSkip option no longer works.
I ended up just showing a label for certain numbers, which is a solution but not ideal IMO. This was the only way I could get it to work:

scales: {
        yAxes: [{
          type: 'logarithmic',
          stacked: true,
          ticks: {
            autoSkip: true,
            min: 1,

            userCallback: function (label, index, labels) {
              if (!isNaN(label) && (label==10 || label==100 || label==1000 || label==10000 || label==100000  || label==1000000)) {
                if (Math.floor(label) === label) {
                  return _this.utils.formatNumber(label);
                }
                else {
                  return label;
                }
              } 
            },
          },
          gridLines: {
            color: "rgba(255,255,255,0)",
            display: false
          }
        }]
....

[benmccann]

@ac-arecabay I sent a fix for this issue: https://github.com/chartjs/Chart.js/pull/6853

[ac-arecabay]

Awesome!

On Thu, Dec 19, 2019 at 9:49 AM Ben McCann [e-mail] wrote:

@ac-arecabay https://github.com/ac-arecabay I sent a fix for this
issue: #6853 https://github.com/chartjs/Chart.js/pull/6853

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/chartjs/Chart.js/issues/2815?email_source=notifications&email_token=AJHB4T3IBQM4TMH6V3AR4ZDQZOX2PA5CNFSM4CHJKGVKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHKMUKA#issuecomment-567593512,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AJHB4T2IX4PG3DJUCSENVX3QZOX2PANCNFSM4CHJKGVA
.