Chartjs 2.0 - Increase height of x-axis labels

Question

JSBin here: http://jsbin.com/xukuhanota/1/edit?output

I'm trying to increase the height (or essentially, the top/bottom padding) of the labels (ticks?) along the x axis.

Here is the relevant bit of code for the chart:

xAxes: [{
  id: 'x-axis-0',
  type: 'category',

  gridLines: {
    display: false,
  },

  ticks: {
    fontSize: 16,
    maxRotation: 0,
    fontFamily: "opensans",
    fontStyle: "bold",

    paddingTop: 10,         // doesnt work 
    paddingBottom: 10,      // doesnt work 
  },


  paddingTop: 10,           // doesnt work 
  paddingBottom: 10,        // doesnt work

According to documentation, there are paddingBottom and paddingTop properties, but I don't know if/how they apply to the ticks vs scales.

score 8 · Answer 1 · answered Mar 31 '17 at 06:49

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;
            }
        }]
    }
};

answered Mar 31 '17 at 06:49

Pascal

2,059
3
31
52

scales: { xAxes: [{ display:false, afterFit: (scale) => { scale.height = 40; } }] }, – Doflamingo19 Nov 14 '18 at 15:13

Djizeus · Answer 2 · 2016-06-10T21:13:54.913

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.

edited Jun 10 '16 at 21:13

answered Jun 10 '16 at 20:35

Djizeus

4,161
1
24
42

Thanks. I'm comfortable editing the source if you see the line it's computed on... Having trouble finding even that. – elzi Jun 10 '16 at 20:53
Could be easier than I thought after a second look, check my updated answer. – Djizeus Jun 10 '16 at 21:14
I'm hooked into the `afterFit` callback on xAxes, and seeing the scale instance as the parameter. I can then edit `scale.paddingTop = 10` for example but nothing seems to be changed. Am I to return a value? Here is an updated JSBin: http://jsbin.com/neyiyuviku/1/edit – elzi Jun 10 '16 at 21:33
Here's the [category scale](https://github.com/chartjs/Chart.js/blob/master/src/scales/scale.category.js), I suspect I can make modifications to this? – elzi Jun 10 '16 at 21:40

Chartjs 2.0 - Increase height of x-axis labels

2 Answers2