Fixed width for ticks

[rept]

I have multiple charts in one screen (horizontalBar). Is there a way to make sure the label on the left are always of the same width (and aligned right) so the different charts align nicely? Ideally if too long they could be overflow with ellipsis (that I can probable handle in callback already).

See example of what I'm trying to achieve.

[etimberg]

@rept unfortunately there is no way to easily synchronize this. It could be done with code that uses the axis callbacks to set the width of the axis to be a certain amount in afterSetDimensions. Off the top of my head I don't know exactly what that code would look like but you could play with it and see

[rept]

Thx, for the pointer in the right direction. I'll play around with that and see where I get. If I get it working I'll post code here.

[rept]

Hi @etimberg,

Works with the following code:

                            yAxes: [
                                {
                                    afterSetDimensions: function(axes) {
                                            console.log(axes);
                                            axes.maxWidth = 165;
                                            console.log(axes.width);
                                    }
                                }
                            ]

Which gives this result.

One question I got about this:
Is there a way to apply a CSS class to the label on the left? That way I could apply the overflow property with ellipsis.

[etimberg]

Unfortunately css doesn't work because the text renders on the canvas. It would require changing the draw code to ellipsify text when necessary

[rept]

Hi Tim,

Can you point me a bit in the right direction as to where the labels are drawn? Line number or anything would help a lot.

Thanks.

[rept]

Hi Tim,

Not needed anymore, I just cut the text from the labels, not ideal but it gets the job done. Do I close this issue? Would be nice if it were possible to add css but probably a nice to have...

[etimberg]

Pretty close in v3.0.0-beta.12. The only thing missing is the ellipsis text truncation which I think should be done manually. https://jsfiddle.net/mfpnv47g/

[lobaak]

For anyone else looking for this with a more recent version of chart.js

scales: {
  y: {
    afterFit(scale) {
      scale.width = 90;
    },
  },
},

[alexbodn]

hello @rept @lobaak ,
both your solutions looked appealing for me.
i tried them, but unfortunately with no success.

here is my scenario: a chart with 3 subcharts in y scales, with a common x scale.
all the subcharts (scales) show with equal height.
i'd like to show them in different heights, thus i've used the callbacks you suggested,
to no avail.
may you have a better solution?

[elinake]

afterFit doesn't work if you have to use resize, resize overrides the width after afterFit.