Как отображать метки за пределами круговой диаграммы?

Question

Круговая диаграмма

Я использовал ng2-диаграммы (chart.js) в угловых. Мне нужно иметь метки за пределами круговой диаграммы, как на прикрепленном изображении. На данный момент я отключил атрибут lengend. Я устанавливаю метки и цвета фона через @Input(). Я мог бы разместить надписи выше / ниже, изменив атрибут pieChartLegend, но они мне нужны за пределами границ. Положение границ будет изменяться динамически в зависимости от ввода, но метка вне границы будет статичной.

public pieChartOptions: ChartOptions = {
  responsive: true,
  legend: {
    display: false
  }
};

chartlabels: Label[] = [];
chartdata: SingleDataSet;

public chartType: ChartType = 'pie';
// public pieChartLegend = {display:true,position:'bottom'};
// public pieChartPlugins = [];

public chartcolors: Array<any> = [
  {
    backgroundColor: "",
    borderWidth: 1,
  }
];

<canvas baseChart 
    [data]="chartdata" 
    [labels]="chartlabels" 
    [chartType]="chartType"
    [colors]="chartcolors"
    [options]="pieChartOptions">
</canvas>

Answer 1

Это можно сделать с помощью плагина 'chartjs-plugin-labels'. В этом плагине есть возможность показывать метку за пределами круговой секции. Расчет сделан, чтобы показать метку в центре круговой секции (вне графика). Я изменил расчет, чтобы показать метку в конце секции пирога.

Ссылка для плагина