First and last ticks align left right on x axis

[payalord]

Hi, what is the best way to align first tick on x axis to the left? So tick text starts on same level where chart begin to draw. And align last tick to the right? So text ends where chart ends. While at the same time distance between ticks must be equal. Example:

[benmccann]

You can replace the generated ticks with your own ticks in afterBuildTicks to use any tick generation strategy that you'd like

[foysalremon]

Can someone explain how to use afterBuildTicks exactly for this purpose. Documentation does not explain much and I couldn't find any setting or option for alignment.

[etimberg]

I think this would require updating the positions but the data structures to update are internal (scale._labelItems in v3.0.0-alpha) and therefore subject to change. There would need to be code changes to allow configuration of the label alignment in a public way

[payalord]

@etimberg This task is actually bigger than it looks. It will require to update the next:

1. positions - with calculating the right label value based on position and label string size (this one is easy).
2. scale of chart render area - to eliminate white gap on left side which was there because of first tick center alignment previously.

I probably will create an extension for this task soon. But would be nice if this will be available as an option in chart.js in the future out of the box.

[harenlewis]

Hi, @etimberg I'm trying to achieve something similar. Here's an eg:

I looked into beforeFit callback but was unable to access scale._labelItems or scale._gridLineItems
@payalord How did you implement it?

Is there some workaround to get this working?

[etimberg]

Configurable using new alignment setting from #7846

[Talla2XLC]

@etimberg This feature (at the moment, the name of this setting has been changed from "alignment" to "align") works for whole axis ticks and unfortunately not able to set first tick to "start" align and last tick for "end" align simultaneously.
I faced with tis issue some days ago and looks like only plugin hooks can help me here by changing chart.scales.x._labelItems[0].textAlign property

[ITsvetkoFF]

I was trying to solve similar issue with labels (I assume that _gridLineItems can be changed similarly)

Since Labels are calculated and drawn in the same function

The only way is to pre-calculate those items (function takes those item from scale if possible)

So the minimal solution that worked for me was to have align: 'start' for ticks
and for x scale in afterFit property:

afterFit: (scale) => {
  scale.paddingRight = 3 // seems to be valid value - ChartJS has it hard-coded to 3 for left padding
  scale._labelItems = scale._computeLabelItems(scale.chart.chartArea) // this is important - to recalculate label positions.
},

I was surprised that scale._computeLabelItems(scale.chart.chartArea) recalculated everything properly as I wanted. But even if it is not - it can be tuned

Overall I'd be happy to see better solution from someone :)

[Talla2XLC]

@etimberg This feature (at the moment, the name of this setting has been changed from "alignment" to "align") works for whole axis ticks and unfortunately not able to set first tick to "start" align and last tick for "end" align simultaneously. I faced with tis issue some days ago and looks like only plugin hooks can help me here by changing chart.scales.x._labelItems[0].textAlign property

Implementing new align type for X axis in progress:
#10106

[stevenKirill]

Is it possible now to position first tick on start and last tick on end ?

[Talla2XLC]

Is it possible now to position first tick on start and last tick on end ?

Yes. You are looking for align = 'inner' in axis options

https://www.chartjs.org/docs/latest/axes/cartesian/_common_ticks.html