[BUG] Ticks should align when multiple Y axis for line and bar chart

[emn178]

See https://jsfiddle.net/kng1d49d/
When I use two Y axis for line and bar in the same time, Y ticks does not align and show extra grid lines.

Expected Behavior

Y ticks should align.

Current Behavior

Y ticks does not align and show extra grid lines.

Possible Solution

In this sample, it show only one Y-axis grid line. See https://jsfiddle.net/kng1d49d/1/
But the ticks on right side still can't align, looks not good. The problem is caused by different count of ticks. Count of ticks on left side is 6, right is 5. I think to make sure rendering in the same count can fix this.

Environment

• Chart.js version: 2.3.0

[madmoizo]

maxTicksLimit + suggestedMax
https://jsfiddle.net/kng1d49d/2/

[etimberg]

@frlinw has a good answer.

CC @chartjs/maintainers should we provide a way of syncing number of ticks between parallel axes?

[emn178]

thanks for comment.
but it still happens if they use different suggestedMax.
eg. 100 and 600, https://jsfiddle.net/kng1d49d/3/

[madmoizo]

You can disable gridLines for the right y axis... It's not the best solution but it's probably the only one (I did that for my charts)

[SilentFlame]

I too agree with @frlinw , as it's just there for the ease in the interpretation.

Anyway is this issue resolved?
If not, would like to contribute.

[JC5]

It is not yet resolved, my charts suffer from this as well. Due to their dynamic nature, I can only use "maxTicksLimit" what does not work.

[TylerYang]

Same here, would appreciate it if someone could show me the way.

[dregini]

Same problem here 2 scale misaligned, i'm using horizontalBar with 2 Y-axes with type:category so no use for suggestedMax

[pierfreeman]

Any news about this issue? the solution proposed by @frlinw only works if the two datasets have the same order of magnitude or the same measure.
My chart renders datasets representing different metrics, so with very different values, and since the rendering is dynamic with respect to the metrics selected (by the user), I cannot know which suggestedMax value to set in order to have the same ticks line shared by the two Y-axes...

[madmoizo]

@pierfreeman
In most case the left axis is the "main" so you can disable gridLines for the "optionnal" right axis. You end up with a clean chart, very readable with 2 clean scales.

Now, I agree, a perfect matching between y-axis with perfect scales is a must have.
My first idea was to chose the main axis, if necessary force the typeof data you can accept for the second scale (integer, float) and build it with these constraints. But it's only possible if there is an order in scales building.
Maybe @etimberg can tell us what are the pain points to achieve this

[mikeantkowiak]

Hi everyone. Did anyone ever find a solution for this bug.
It would be great if there was a minTicksLimit just like the maxTicksLimit, that way we could just use the same number for both and it would alway only display x.

If there is any other work around please help!

[ralphking]

@mikeantkowiak I'm looking for an answer to this as well. Any luck? Just hiding the gridlines for the second axis isn't really an option. Using maxTicksLimit and suggestedLimit doesn't work either

[fhidalgor]

I had to do the following to get my labels aligned:
ax2 = ax.twiny()
ax3 = ax.twinx()
and then:
ax2.set_xlim(ax.get_xlim())
ax3.set_ylim(ax.get_ylim())

It seemed to solve the problem

[AlexSapoznikov]

I did it like this:

// Find max values from data, so at this point you should have values for:
const leftYMax;
const rightYMax;

// Amount of labels you want to see on y axis
const amountOfLabels = 10;

const newLeftYMax = calculateMax(amountOfLabels, leftYMax);
const leftYStep = newLeftYMax / amountOfLabels;

const newRightYMax = calculateMax(amountOfLabels, rightYMax);
const rightYStep = newRightYMax / amountOfLabels;

// Function for calculating new max
function calculateMax (amountOfLabels, max) {
  // If max is divisible by amount of labels, then it's a perfect fit
  if (max % amountOfLabels === 0) {
    return max;
  }
  // If max is not divisible by amount of labels, let's find out how much there
  // is missing from max so it could be divisible
  const diffDivisibleByAmountOfLabels = amountOfLabels - (max % amountOfLabels);

  // Add missing value to max to get it divisible and achieve perfect fit
  return max + diffDivisibleByAmountOfLabels;
}

// Attach calculated data to your Chart config
this.mixedChart = new Chart(context, {
  options: {
    scales: {
       yAxes: [
         {
           ticks: {
             beginAtZero: true,
             max: newLeftYMax,
             stepSize: leftYStep
           },
         },
         {
           ticks: {
             beginAtZero: true,
             max: newRightYMax,
             stepSize: rightYStep
           },
         }
       ]
    }
  }
});