Reduce distance between labels and pie chart

[Shubham-Vishwakarma]

I was try donut chart on https://www.chartjs.org/docs/latest/charts/doughnut.html

With the below radius set at 50% How to decrease the spacing from chart/graph and labels Right's now there's a lot of spacing

const config = {
  type: 'doughnut',
  data: data,
  options: {
    radius: '50%',
    spacing: 0,
  }
};

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

[etimberg]

The only way to decrease the spacing would be to decrease the size of the canvas

[kurkle]

Or increase the radius. You can use layout padding to add space to gge bottom, if thst is what you are actually trying to do.

[shubham242k]

Hey @kurkle. In my opinion, Instead of having a position of the label at the top, we should put labels underneath the doughnut and pie charts, so that label's position can be relative to the chart's bottom side and that will be more appropriate. What say?

[kurkle]

Its the legend plugin that shows the labels. You can change the position.

https://www.chartjs.org/docs/latest/samples/legend/position.html

[shubham242k]

Like in the below image, the label's position is fixed. What I am saying is to make its position relative to the chart so that the extra space between label and chart can be minimized.

[kurkle]

It is relative to the chart (canvas). As is the radius. You should not try to modify the chart size by reducing the radius, but changing the canvas container size.

https://www.chartjs.org/docs/latest/configuration/responsive.html

[shubham242k]

Got it! Thanks for this insight.

[Shubham-Vishwakarma]

Apologies for late response

The application was referring to Chart-2.8.0 previously and output looked like this

We were planning to update it with latest Chart Js version and now output looks like this

The pie chart has expanded a lot In newer version the .css files has been removed due to which I think the problem is caused by that.

I went through the docs and was able to figure out how to decrease the radius But there's a gap between label and graph

I am not sure when used canvas of fixed size will make it responsive or not

Please guide me Just to mention, I am new to ChartJS

[kurkle]

Its the default aspectRatio change.

[etimberg]

I think this was answered. The change in v3 was the default aspect ratio changing to be a square. The aspectRatio can be set to 2 to go back to the v2 behaviour