Add new align 'inner' for X axis

[Talla2XLC]

New align type: 'left-right' for options.scales['x'].ticks namespace will allow users to aling horizontal axis ticks: 'start" for first (left) tick and 'end' for last (right) tick.
Before:

After:

[LeeLenaleee]

1 Suggestion that I think will make the functionality better and more flexible.

Also before this can be merged the typings for this property have to be adjusted here:

Chart.js/types/index.esm.d.ts

Line 3030 in a7d98fb

align: 'start' | 'center' | 'end';

And the documentation also needs to be updated here: https://github.com/chartjs/Chart.js/blob/master/docs/axes/cartesian/_common_ticks.md

[etimberg]

I like the outcome. It would be good to add some image based tests for this and to test how this works when labels are rotated. There are examples of those tests in https://github.com/chartjs/Chart.js/tree/master/test/fixtures/core.scale

[etimberg]

Thanks for adding the tests. They look good. I think there's one more small case to consider that can be tested by hiding the Y axis (display: false). The default case for the left padding is half the width of the first label. When the alignment is set to 'inner' I think this should be 0

[kurkle]

Looks good to me. Needs a rebase though.

[LeeLenaleee]

Think adding this else clause will make for a lot nicer looking option because the in between ticks get centered so you get this:

Which in my oppinion is a lot more pleasing to look at.

[Talla2XLC]

Thanks for adding the tests. They look good. I think there's one more small case to consider that can be tested by hiding the Y axis (display: false). The default case for the left padding is half the width of the first label. When the alignment is set to 'inner' I think this should be 0

Add test for inner align without Y axis. Works perfect

[Talla2XLC]

Think adding this else clause will make for a lot nicer looking option because the in between ticks get centered so you get this:

Which in my oppinion is a lot more pleasing to look at.

Just correct logic to handle central ticks for inner align and also correct test for this new look

[etimberg]

Thanks for adding the tests. They look good. I think there's one more small case to consider that can be tested by hiding the Y axis (display: false). The default case for the left padding is half the width of the first label. When the alignment is set to 'inner' I think this should be 0

Add test for inner align without Y axis. Works perfect

They work, but there's a gap at the left and right edges in label-align-inner-onlyX.png. If you increase the length of the labels, that gap will increase shrinking the chart. By adjusting the paddingLeft and paddingRight calculations, this gap won't be present

[Talla2XLC]

Thanks for adding the tests. They look good. I think there's one more small case to consider that can be tested by hiding the Y axis (display: false). The default case for the left padding is half the width of the first label. When the alignment is set to 'inner' I think this should be 0

Add test for inner align without Y axis. Works perfect

They work, but there's a gap at the left and right edges in label-align-inner-onlyX.png. If you increase the length of the labels, that gap will increase shrinking the chart. By adjusting the paddingLeft and paddingRight calculations, this gap won't be present

Got it! Padding for left and right borders was corrected. Tests results was corrected

[Talla2XLC]

@etimberg , @kurkle , @LeeLenaleee
I'm not very familiar with open-source projects with restricted merge requests on Github so what to do next to merge this pull request? As I can see all participants approved this branch

[etimberg]

So this is good to merge, but we want to release v3.7.1 first to keep the branching a little simpler. As soon as that is released (should be soon) then we'll merge this for 3.8.0

[etimberg]

v3.7.1 has merged, so this is merging and will be released with v3.8.0