从 react chartjs 2 添加偏移量时如何居中和固定饼图的大小？

Question

I need to center the pie chart into a component/div and also reduce the size of the chart to fix the cutting out in the ends.

Its cuts-off at bottom and sides.

Code:

export const data = {
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [
    {
      label: "# of Votes",
      data: [13,1],
      backgroundColor: [
        "rgba(235, 159, 12,0.7)",
        "rgba(235, 159, 12, 1)",
      ],
      borderColor: [
        "rgba(235, 159, 12, 0.7)",
        "rgba(235, 159, 12, 1)",
      ],
      borderWidth: 1,
      offset:20
    },
  ],
};

export const options = {
    responsive: true,
    maintainAspectRatio: true,
    plugins: {
      title: {
        display: false,
      },
      legend:{
          display:false
      },
    },
  };

function MiniChart() {
  return (
    <div className="flex flex-col w-[150px] lg:w-[200px]">
      <p className="text-center text-md lg:text-lg">Unicorn Startups</p>
      <div className="bg-red-100 w-[150px] h-[150px] lg:w-[200px] lg:h-[200px]">
        <Pie data={data} options={options}/>
      </div>
    </div>
  );
}

Answer 1

you can reduce the size of the chart without affecting its ratio by setting the responsive to false. so change
responsive: true to responsive: false

Answer 2

This was a bug.

Has been fixed in Chart.Js ^4.0.0 .

Here's the solved Issue on Github .

You can check the fix from the website, in the Pie example by acting on the dataset config values, adding some offset.