Chart.js: yAxis Tick Label Alignment

Created on 27 Apr 2017  Â·  5Comments  Â·  Source: chartjs/Chart.js

I have a requirement to left align the yAxis tick labels. By default I see that they are right aligned tight to the graph.

I have been trying to find a solution and have been unable to find one as yet. Is this even a possible configuration or am I stuck with the right aligned tick labels?

help wanted enhancement

Most helpful comment

Hi, I'm also facing this issue too. Is it possible to bring in some of the standard CSS styles to TICKS,LABELS,LEGENDS of chartjs? For example,
1) Adding display: 'flex', justify-content:'space-evenly' to LEGEND itself.
2) Left align Yaxis ticks instead of right.

All 5 comments

Changing this is not currently possible. It requires code changes inside the draw method of the axis

Help is still wanted on this matter -
I added % to the axis displayed on the right of my chart and the tex is aligned to the left, looking bad

Is this by any chance possible on the X-Axis? By default they're centered but I'd love to have the left aligned to the tick.

@apertureless
do the following in

yAxes: [{
    ticks: {
          mirror: true,
          padding: 50,
       }
     }]

Hi, I'm also facing this issue too. Is it possible to bring in some of the standard CSS styles to TICKS,LABELS,LEGENDS of chartjs? For example,
1) Adding display: 'flex', justify-content:'space-evenly' to LEGEND itself.
2) Left align Yaxis ticks instead of right.

Was this page helpful?
0 / 5 - 0 ratings