chartjs - top and bottom padding of a chart area

Question

I need to add more space above and below chart area (near top and bottom scale). It seems that only ability to add a padding to the vertical axes. I disabled tick lines according to documentation: http://www.chartjs.org/docs/#scales:

Chart.defaults.scale.gridLines.drawTicks = false;

chartjs chart area top and bottom paddings image:

Also I can add padding to vertical axes scale labels (ticks)

Chart.defaults.scale.ticks.padding = 15;

How can I add a padding above a top scale and below a bottom (zero) scale?

Brigadier

Answer 1

There are a few ways to control padding between scales/legends in chart.js (some official ways documented in the docs and some "hacky" ways described elsewhere). The problem is, there just isn't a way to use the existing configuration options to control padding through out the chart (left scale, bottom scale, top scale...or bottom of legend, etc.).

Fortunately, because of the flexible chart.js interfaces (and because we can create new scale types, etc.), it is still possible to control the padding without too much fuss. Let me explain the way to add left, top, and bottom padding and then provide a working example at the end very end (skip ahead if you so desire).

Left Padding

This one is easy. There is a documented option to control this. Just set the scales.yAxes.ticks.padding option to whatever value you want. Here is an example.

scales: {
  yAxes: [{
    ticks: {
      beginAtZero: true,
      padding: 25,
    }
  }]
}

Top Padding (or Legend Padding)

There is no option to control this so we have to build it in. I built it in by creating a new Legend object and overwriting the afterFit() function that uses a paddingBottom option set on the options object. This isn't too difficult but requires a round around way to do it. Here is the relevant code.

function getBoxWidth(labelOpts, fontSize) {
  return labelOpts.usePointStyle ?
    fontSize * Math.SQRT2 :
  labelOpts.boxWidth;
};

Chart.NewLegend = Chart.Legend.extend({
  afterFit: function() {
    this.height = this.height + this.options.paddingBottom;
  },
});

function createNewLegendAndAttach(chartInstance, legendOpts) {
  var legend = new Chart.NewLegend({
    ctx: chartInstance.chart.ctx,
    options: legendOpts,
    chart: chartInstance
  });

  if (chartInstance.legend) {
    Chart.layoutService.removeBox(chartInstance, chartInstance.legend);
    delete chartInstance.newLegend;
  }

  chartInstance.newLegend = legend;
  Chart.layoutService.addBox(chartInstance, legend);
}

// Register the legend plugin
Chart.plugins.register({
  beforeInit: function(chartInstance) {
    var legendOpts = chartInstance.options.legend;

    if (legendOpts) {
      createNewLegendAndAttach(chartInstance, legendOpts);
    }
  },
  beforeUpdate: function(chartInstance) {
    var legendOpts = chartInstance.options.legend;

    if (legendOpts) {
      legendOpts = Chart.helpers.configMerge(Chart.defaults.global.legend, legendOpts);

      if (chartInstance.newLegend) {
        chartInstance.newLegend.options = legendOpts;
      } else {
        createNewLegendAndAttach(chartInstance, legendOpts);
      }
    } else {
      Chart.layoutService.removeBox(chartInstance, chartInstance.newLegend);
      delete chartInstance.newLegend;
    }
  },
  afterEvent: function(chartInstance, e) {
    var legend = chartInstance.newLegend;
    if (legend) {
      legend.handleEvent(e);
    }
  }
});

Bottom Padding

There is also no option to control this, so we have to also build it in. Since we are dealing with a scale here, the best way to do this is extending the 'category' scale and add logic to handle a scale paddingTop option. After reading through the source, we need to overwrite the draw() function to do this. Here is the relevant code (see my example for the full implementation).

// ...
if (isHorizontal) {
  if (options.position === 'bottom') {
    // bottom
    textBaseline = !isRotated? 'top':'middle';
    textAlign = !isRotated? 'center': 'right';
    labelY = me.top + tl + me.options.paddingTop;
  } else {
    // top
    textBaseline = !isRotated? 'bottom':'middle';
    textAlign = !isRotated? 'center': 'left';
    labelY = me.bottom - tl;
  }
}
// ...

Here is a codepen example showing all this put together.

Isoniazid

Hello! Thanks, that works. I'm pretty much shocked that for so small thing so much code is needed. I think that this options should be in default package. Thank you so much for your time. – Brigadier

I agree. If i get around to it maybe I will submit a request to the chart.js guys. – Isoniazid

Thanks for your example. Just a few questions. What is the use of getBoxWidth function? And what about a legend with position: 'bottom' (of 'left'/'right'). This example seems to place the legend always at top, even if the legend position is set to something else. – Schonthal

Answer 2

Edit: This does not provide provide padding inside the chart (which is what this question is originally about), but rather adds a padding around the chart

For those still looking for this that might end up here in a google search (like me), it seems to have been solved in a later version: https://www.chartjs.org/docs/latest/configuration/layout.html#padding

let chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    layout: {
        padding: {
            left: 50,
            right: 0,
            top: 0,
            bottom: 0
        }
    }
  }
});

Mccary

That controls the padding around the "complete" chart, so unfortunately that only adds space outside the legend, not between legend and chart. – Davison

Oh.. you are completely right.. I misread the question in the quest of solving my own issue which was slightly different. – Mccary

See answer here for modifying the lengend padding: #42586361 – Passible

Phew, you saved my day, I searched this for almost 3 hours with different keywords and tried different techniques but failed, finally I found this. I added offset to the datalabel of pie chart and it was cropping from top and bottom, now its fixed. – Endanger

If this is not answering the question, please consider to remove it as you are only causing confusion. – Sedgewick

Answer 3

For ChartJs version 3 you can remove tickLenght:

scales: {
      x: {
        grid: {
          tickWidth:0,
          tickLength: 0,
      },
      y: {
        grid: {
          tickWidth:0,
          tickLength: 0,
      },
    ...
    }

Decoupage

Answer 4

This does not add padding between the chart and legend but the above code no longer seems to work on Chart.js v3 and above. Here is a workaround plugin that pads the y-axis to ensure labels (only checked with chartjs-plugin-datalabels) fall within the chart.

var pluginAutoAdjustRangeY = {
   id: 'autoAdjustRangeY',
   beforeInit: function(chartInstance) {
      var legendOpts = chartInstance.options.legend;
      if (legendOpts) {
         chartInstance.legend.afterFit = function(){
            var max = 0;
            var min = 0;

            var datasets = chartInstance.data.datasets.length
            for(let i = 0; i < datasets; i++){
               var points = chartInstance.data.datasets[i].data.length
               for(let p = 0; p < points; p++){
                  var v = parseFloat(chartInstance.data.datasets[i].data[p]);
                  if(v > max) max = v; 
                  if(v < min) min = v; 
               }           
            }
           
            var range = parseInt((max - min) * ((chartInstance.options.legend.padding) || 0));
            chartInstance.options.scales.y.max = parseInt(max + range);
            if(min !== 0) chartInstance.options.scales.y.min = parseInt(min - range);
         }
      }
   },   
   beforeLayout: function(chartInstance) { //2
      if(chartInstance.options.legend){
         if(chartInstance.legend.afterFit){
            chartInstance.legend.afterFit();
         }
      }
   },
};

And can be used by as such:

options: {
   legend: {
      padding: 0.15,  //percentage of Y range to pad ends of axis
   }
}

Hadwyn

Answer 5

A different way can be simple setting a max value into scales when it's rendering, causing a "inner padding".

The max value are always equals to: (max value in datasets) + padding.

So, in your "render" function

// In case your datasets data are int like: [5, 80, 4, 72, 35, ...]
let maxValueInDatasets = Math.max(...chart.data.datasets[0].data)

// In case your datasets data are a object like: [{x:'jan',y:60}, {x:'fev',y:89}, ...]
let maxValueInDatasets = Math.max(
    ...chart.data.datasets[0].data.map(entry => entry.y),
    ...chart.data.datasets[1].data.map(entry => entry.y),
)

let padding = maxValueInDatasets * .1 // 10% of max value (adjust as you want)
chart.options.scales.y.max = Math.floor(maxValueInDatasets + padding) // Magic line
chart.update() // Call update after changing configurations

Tercentenary