Labels outside and invisible at pie chart

[konrad79]

I want to add labels around a pie chart (in Angular 11). But since the circle of the chart is as large that it reaches the "bottom-line" of the canvas, the bottom labels are not visible.
Is there a setting that calculate other, visible positions for the labels? Or how can I shrink the size of the pie to get enough space for the bottom labels?

Typescript code:

plugins: {
  datalabels: {
    display: this.showLegend,
    align: 'end',
    anchor: 'end',
    clamp: true,
    font: { size: 12, weight: 'normal' },
    color: '#333',
    formatter(value, context) {
      return context.chart.data.labels[context.dataIndex];
    },
  }
}

[kurkle]

You can use layout padding to make room for the labels:
https://www.chartjs.org/docs/latest/configuration/layout.html

[konrad79]

Thx :-)

[Rjaat]

I want to add labels around a pie chart (in Angular 11). But since the circle of the chart is as large that it reaches the "bottom-line" of the canvas, the bottom labels are not visible. Is there a setting that calculate other, visible positions for the labels? Or how can I shrink the size of the pie to get enough space for the bottom labels?

Typescript code:

plugins: {
  datalabels: {
    display: this.showLegend,
    align: 'end',
    anchor: 'end',
    clamp: true,
    font: { size: 12, weight: 'normal' },
    color: '#333',
    formatter(value, context) {
      return context.chart.data.labels[context.dataIndex];
    },
  }
}

i am not even able to add labels around the pie-chart. can you help with this?? (using chartjs-plugin-datalabels version 2.2.0 and Chart.js v4.4.1))

[Rohitpatil-123]

these labels are overlapping with each other and also want to increase the width of bar could you please help me @kurkle @konrad79

[konrad79]

@Rohitpatil-123 What are you trying to achieve? More space between the bars? Auto cutting to long labels with "..."? Smaller fonts for the labels?