Increase space between legend and chart

Question

I am using ng2 chart with angular 7. I have a piechart

How to increase space between the legend and the chart?

I am trying to this, but it doesn't work.

public pieChartOptions: ChartOptions = {
    responsive: true,

    rotation: 0,

    plugins: {
      afterFit: function(chart, options) {
        chart.plugins.register({
          afterFit: function() {
            this.height = this.height + 150;
          },
        })
      },

      datalabels: {
        align: 'end',
        anchor: 'end',
        formatter: (value, ctx) => {
          const label = ctx.chart.data.labels[ctx.dataIndex];
          return value + '% ';
        },

        font: {
          weight: 'bold',
          size: 16,
        }
      }
    }
  };

Possible duplicate of [Chart.js - Increase spacing between legend and chart](https://stackoverflow.com/questions/42585861/chart-js-increase-spacing-between-legend-and-chart) — gowtham rajan, Mar 24 '19 at 08:22
Check chart.js version which one u using and tried Like tat page ? — gowtham rajan, Mar 24 '19 at 08:28
Where i placed this line Chart.Legend.prototype.afterFit = function() { this.height = this.height + 50; }; — vaishuani, Mar 24 '19 at 08:29
@gowthamrajan i tried to this plugins: { afterFit: function(chart, options) { chart.Legend.prototype.afterFit = function() { this.height = this.height + 50; }; }, But not working : ( — vaishuani, Mar 24 '19 at 08:33
Same pichart try like tat example one. Have u tried already? — gowtham rajan, Mar 24 '19 at 08:40
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/190573/discussion-between-vaishuani-and-gowtham-rajan). — vaishuani, Mar 24 '19 at 08:56

score 2 · Answer 1 · answered Mar 31 '19 at 07:41

@gowtham rajan is correct, based on this answer you can use a simple inline plugin to do the job:

{
  beforeInit: function(chart, options) {
    chart.legend.afterFit = function() {
      this.height += 100; // must use `function` and not => because of `this`
    };
  }
}

See this stackblitz for example

Increase space between legend and chart

1 Answers1