[Solved]-Chart.js - Increase spacing between legend and chart-Chart.js

You can use layout property under options. This helped me:

   layout: {
        padding: {
            left: 50,
            right: 130,
            top: 0,
            bottom: 0
        }
    }

After searching the chart.js file I found out that the height of the labels bar is defined there in

height = this._fitRows(titleHeight, fontSize, boxWidth, itemHeight)

OR

this.height = Math.min(height, options.maxHeight || this.maxHeight)

in the fit() function

fit() {
const {options, ctx} = this;
if (!options.display) {
  this.width = this.height = 0;
  return;
}
const labelOpts = options.labels;
const labelFont = toFont(labelOpts.font);
const fontSize = labelFont.size;
const titleHeight = this._computeTitleHeight();
const {boxWidth, itemHeight} = getBoxSize(labelOpts, fontSize);
let width, height;
ctx.font = labelFont.string;
if (this.isHorizontal()) {
  width = this.maxWidth;
  height = this._fitRows(titleHeight, fontSize, boxWidth, itemHeight);
} else {
  height = this.maxHeight;
  width = this._fitCols(titleHeight, fontSize, boxWidth, itemHeight);
}
this.width = Math.min(width, options.maxWidth || this.maxWidth);
this.height = Math.min(height, options.maxHeight || this.maxHeight) + 40;}

And I changed it to +40 as shown above. and it worked fine for me so I wanted to share.

I have tried the above approaches on my react(react-chartjs-2) project but no luck. Here I have one different approach like creating custom legends outside the chart. so you can get more control over it

1. Hide default legend
2. Get legend object using any ref method.
3. Loop and make a custom legend using html and css.
4. Sample codesanbox

I am aware that OP is not about reactjs component, but as it is a common issue it will help someone.

Orginal reference

.

I'm using react-chartjs-2 (but this is just a port and uses the same configurations object) and I was able to achieve that by changing the labels configuration nested on legend configuration:

chartOptions = {
  legend: {
    labels: {
      padding: 50 -> this one.
    }
  },

You can check the property description here: https://www.chartjs.org/docs/latest/configuration/legend.html

Hope it helps.

This helped me after 2 days of research.

Chart.Legend.prototype.afterFit = function() {
    this.height = this.height + 50;
};

update this in module.ts file

If anyone is wondering why the afterFit solution is not working in Chart.js 3.3.0 it is because afterFit function was removed from the legend plugin.

If you want to make this work anyway by taking advantage over the fit function, you can try this hacky solution / workaround:

const plugin = {
  beforeInit(chart) {
    // Get reference to the original fit function
    const originalFit = chart.legend.fit;

    // Override the fit function
    chart.legend.fit = function fit() {
      // Call original function and bind scope in order to use `this` correctly inside it
      originalFit.bind(chart.legend)();
      // Change the height as suggested in another answers
      this.height += 15;
    }
  };
}

I know that this is not an ideal solution, but until we have native support for this legend padding, I'm afraid this is as good we can do right now.

If you want to apply padding below legend for some charts only in your app:

ChartJS >= 2.1.0

Chart.plugins.register({
  id: 'paddingBelowLegends',
  beforeInit: function(chart, options) {
    chart.legend.afterFit = function() {
      this.height = this.height + 50;
    };
  }
});

// ----------------------------------
// disable the plugin only for charts
// where you DO NOT WANT the padding
// ----------------------------------

// for raw ChartJS use:
var chart = new Chart(ctx, {
  config: {
    plugins: {
      paddingBelowLegends: false
    }
  }
});

// for angular-chartjs:
$scope.myChart.options.plugins = { paddingBelowLegends: false }
// then in template:
// <canvas class="chart ..." chart-options="myChart.options" ... />

ChartJS >= 2.5.0

Specific plugins for each chart are supported, it should be possible to do:

var chart = new Chart(ctx, {
  plugins: [{
    beforeInit: function(chart, options) {
      chart.legend.afterFit = function() {
        this.height = this.height + 50;
      };
    }
  }]
});

See ChartJS documentation + inspired by this other answer

If you want do increase spacing in all charts you can put this code before creating :

Chart.Legend.prototype.afterFit = function() {
    this.height = this.height + 50;
};

Of course, I don't try but i think you can change it (or copy the original Chart object before, to keep the original padding).

Bye,