Pie cropped when using Offset in dataset (with specific data)

[doc-code-hub]

Expected behavior

When using the offset in a Pie chart dataset, simply, the charts should never crop some parts of the pie (as always)

---

I state that I personally found the bug on the Pie charts. I don't rule out that others (like the donut) may be equally involved, but I don't know.

Current behavior

When some specific data list are rendered, the bottom of the chart is cropped.

Speaking of sensation, it appears that when there is a slice larger than half the pie, at the bottom, the bug occurs.

The following cropped chart image came from this dataset

{
    data: [1, 13, 1],
    offset: 20
    ...,
}

But everythink works fine using, for example

{
    data: [13, 1, 13],
    offset: 20
    ...,
}

therefore, it depends on the data.

---

Seems like a Chart.js bug (and not some wrapper bug) cause i can also replicate the error on your official site in the runnable example (https://www.chartjs.org/docs/latest/samples/other-charts/pie.html)

With the following configuration in the Setup tab you will get a cropped chart.

const data = {
  labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
  datasets: [
    {
      label: 'Dataset 1',
      data: [4, 50, 4],
      backgroundColor: Object.values(Utils.CHART_COLORS),
      offset: 20
    }
  ]
};

Reproducible sample

https://stackblitz.com/edit/react-ts-fabpct?file=App.tsx

Optional extra steps/info to reproduce

I made this runnable example (locked, so no future changes)

In the snippet, we have 4 different data array.

      data: [1, 13, 1], // cropped...
      // data: [12, 3], // cropped
      // data: [13, 1, 13], // Works fine...
      // data: [4, 3,3,4,5,6,7,8,9], // Works fine...

By default you will see the cropped chart.

If you try to switch between this commented data you will see (as comments describe) the chart cropped and the chart working fine (but only the data is changing).

Possible solution

No response

Context

I was just involved in the detection of the bug in this SO Question. https://stackoverflow.com/questions/72696406/how-to-centre-and-fix-size-of-a-pie-chart-while-offset-is-added-from-react-chart

chart.js version

3.8.0

Browser name and version

Chrome 103.0.5060.66

Link to your project

https://stackblitz.com/edit/react-ts-fabpct?file=App.tsx

[stockiNail]

@doc-code-hub It seems similar to #10220. Maybe the workaround, proposed there, can help.

[stockiNail]

export const options = {
  responsive: true,
  maintainAspectRatio: true,
  layout: {
    padding: {
      bottom(ctx) {
        const chart = ctx.chart;
        const offset = chart.data.datasets[0].offset || 0;
        return offset / 2;
      }
    }
  },
  plugins: {
    title: {
      display: false,
    },
    legend: {
      display: false,
    },
  },
};

[doc-code-hub]

Thanks @stockiNail!

Actually, using your configuration helps workaround the problem.

Warning This way, the problem is we can't get a perfect fit chart (sometime useful/needed).

This is a good workaround in order to avoid crop using offset for some cases. Thank you @stockiNail!

---

Anyway, i opened this issue with the aim of solving the core problem.

This is not a problem I have right now and I don't need a quick fix for that. I just hope for an official solution for a more-stable library.