[BUG] Multiple scale titles are melded with vertical separator lines

[palkakrzysiek]

Expected Behavior

While adding multiple scales, their titles shouldn't be melded with the vertical lines from previous scales

Current Behavior

...but they are.

Possible Solution

Add a 2 points padding while creating the label text

// Chart.js/src/core/core.scale.js
- scaleLabelX = isLeft ? me.left + (scaleLabelFont.size / 2) : me.right - (scaleLabelFont.size / 2);
+ scaleLabelX = isLeft ? me.left + (scaleLabelFont.size / 2) + 2 : me.right - (scaleLabelFont.size / 2) - 2;

It's enough to separate the text and the vertical line of the scale, and it doesn't interfere with values texts.

Steps to Reproduce (for bugs)

1. Add multiple y scales

Environment

• Chart.js version: 2.5

[etimberg]

Here's my proposal for solving this:

Add a new padding setting underneath the scaleLabel key.

scaleOptions: {
  scaleLabel: {
    padding: // Number. default is 0
  }
}

Then, we need to include the padding size when measuring the axis. This would be done here

And finally, we need to use that padding when figuring out the draw location for the title text. This would be done here and here

I'm happy to merge a PR that adds this feature. In terms of unit testing, some of the new image work that @simonbrunel did would help with this.

[GabrielMancik]

I am willing to implement changes but I am not sure what you mean by new image work. Can you clarify?

[etimberg]

@GabrielMancik I meant this PR: #3988

[GabrielMancik]

@etimberg so if i understand it correctly new unit test should be created alongside with this functionality?

EDIT: How do I generate reference PNG images?

[simonbrunel]

@GabrielMancik we try to add unit tests for all new features and regressions. Chrome and FF don't render texts exactly the same so it may be complicated to stabilize image based tests. If there is a way to directly check label positioning, I would recommend the classical method. Anyway, if you want to give it a try, check this description.

The file should live in test/fixtures/ (e.g core.scale/scale-label-padding.json or scale.linear/scale-label-padding.json if specific to the linear scale type) and you should make sure to verify test relevancy (i.e. if you test with padding: 4, try with 2 and 6: test should fail).

[GabrielMancik]

@simonbrunel I have downloaded latest version and run tests (without change) using gulp test command. But some of the tests have failed (testResult.txt). Can you please have a look at log and help me run them successfully?

I see this differences comparing my log with successful tests in pull request:

• I have Windows 8.1
• My Firefox version is 51.0.0 not 52.0.0. But some tests fail also for Chrome browser and there is no difference in version.

[GabrielMancik]

Some tests seems to fail when custom dpi (other then 100%) is set. When I changed it to 100% all tests run successfully.

[GabrielMancik]

Proposed solution would fix the problem only when label is set. Same problem exists even when scales do not have labels.

[etimberg]

Closing as duplicate of #3562