[Chartjs]-Chartjs 2.0 – Increase height of x-axis labels

by

8👍

Just for completeness, provide a options Object like this and your axis will have a fixed height, or change some padding values

var options = {
    scales: {
        xAxes: [{
            afterFit: (scale) => {
                scale.height = 120;
            }
        }]
    }
};

1👍

The documentation says “Scale instances are given the following properties”. To me it does not sound like this is some setting you can give, but rather some setting you can expect if you implement your own scale.

I had a brief look at the code for their scale implementation, and it looks like you don’t have much direct control on the computation of the padding properties, except one setting padding that is not documented (see line 40 in the linked version). I tried applying it in your jsbin (just add a padding property to the ticks object): it did have an effect on the Y axis, but not the X one.

It looks like you will need to provide your own scale implementation if you want better control… In the version I linked, the padding is computed mostly in the calculateTickRotation and fit methods. So changing the padding might be as easy as giving an afterFit callback to the scale options, in which you simply change the paddingTop and paddingBottom. I haven’t tried. Otherwise, create a subclass of Scale and provide an afterFit method.

I’m not chart.js expert, so don’t take this as a complete and definitive answer, but I hope this gives a useful direction.

Leave a comment