Увеличьте расстояние между легендой и диаграммой

Я использую диаграмму ng2 с угловым 7. У меня есть круговая диаграмма

Как увеличить расстояние между легендой и диаграммой?

Я пытаюсь это сделать, но это не работает.

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

angular chart.js ng2-charts
person vaishuani    schedule 24.03.2019    source источник
comment
Возможный дубликат Chart.js - увеличить расстояние между легендой и диаграммой   -  person gowtham rajan    schedule 24.03.2019
comment
Спасибо за ответ. Я пробовал это. Но не работает.   -  person vaishuani    schedule 24.03.2019
comment
Проверьте версию chart.js, которую вы используете, и попробовали страницу Like tat?   -  person gowtham rajan    schedule 24.03.2019
comment
Где я разместил эту строку Chart.Legend.prototype.afterFit = function() { this.height = this.height + 50; };   -  person vaishuani    schedule 24.03.2019
comment
@gowthamrajan я пытался использовать эти плагины: { afterFit: function(chart, options) { chart.Legend.prototype.afterFit = function() { this.height = this.height + 50; }; }, но не работает :(   -  person vaishuani    schedule 24.03.2019
comment
codepen.io/jordanwillis/pen/ZeOYdL   -  person gowtham rajan    schedule 24.03.2019
comment
Тот же самый рисунок, как и первый пример. Вы уже пробовали?   -  person gowtham rajan    schedule 24.03.2019
comment
Давайте продолжим обсуждение в чате.   -  person vaishuani    schedule 24.03.2019

Ответы (1)


arrow_upward
2
arrow_downward

@gowtham rajan верен, основываясь на этом ответе, вы можете использовать простой встроенный плагин для выполнения этой работы:

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

См., например, stackblitz.

person Aviad P.    schedule 31.03.2019