chartjs cutoutPercentage and tooltips does not works in nextjs

Question

I have this code in my next.js project where I am using the react-chartjs-2 library to create charts. the cutoutPercentage property in chart.js theoretically makes the donut chart thinner, but in next.js it doesn't work. how can I make it to work?

import { Doughnut  } from 'react-chartjs-2';

const data = {
  datasets: [
    {
      data: [15, 12, 40, 30],
      backgroundColor: ["#c5e99b", "#8fbc94", "#548687", "#56445d"],
    },
  ],
};

const Options = {
    tooltips: {
      enabled: false,
    },
    cutoutPercentage: 70,
    responsive: true,
    maintainAspectRatio: false,
}

export default () => (
    <Doughnut 
      data={data}
      width={290}
      height={290}
      options={Options}
    />
);

does it show an error on server that document/window is undefined ? — Chemi Adel, Sep 13 '21 at 23:17
Give export comp a name and use this to import component. const DynamicComponentWithNoSSR = dynamic(() => import('../components/hello3'),{ ssr: false }) — Chemi Adel, Sep 13 '21 at 23:41

score 2 · Accepted Answer · answered Sep 14 '21 at 05:55

You defined Options for Chart.js version 2.x but you most probably use Chart.js version 3.x, that's why it doesn't work.

Please take a look at the 3.x Migration Guide in order to find out, what options have changed. In your case, the following points are relevant:

tooltips namespace was renamed to tooltip to match the plugin name.
Doughnut cutoutPercentage was renamed to cutout and accepts pixels as numer and percent as string ending with %.

Accordingly, you need to change your Options as follows:

const Options = {
  plugins: {
    tooltip: {
      enabled: false,
    }
  },
  cutout: '70%',
  responsive: true,
  maintainAspectRatio: false,
}

chartjs cutoutPercentage and tooltips does not works in nextjs

1 Answers1