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?

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.

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

Answer 3

For ChartJs version 3 you can remove tickLenght:

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