I'm using react chart js to show a doughnut in my component.

"chart.js": "^3.7.1",
"react-chartjs-2": "^4.1.0",

I'm not able to show the title :

const data = {
  labels: ["Score", "Total"],
  datasets: [
    {
      label: "Indice d'impact global de la transaction",
      data: [3.7, 5],
      backgroundColor: ["rgba(54, 162, 235, 0.2)", "rgba(128,128,128,0.2)"],
      borderColor: ["rgba(54, 162, 235, 1", "rgba(128,128,128,1)"],
      borderWidth: 1,
      lineTension: 0.5,
    },
  ],
};

<Doughnut
options={{
  plugins: {
    title: {
      display: true,
      text: "Indice d'impact global de la transaction",
      align: "center",
      padding: {
        top: 10,
        bottom: 30,
      },
    },
    legend: {
      display: true,
      position: "top",
    },
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  },
}}
data={data}
/>

How can i correclty show the title ?

CodePudding user response：

This is because you are using treeshaking and not importing and registering the Title

To fix it either import and registr every component you are using, list of all components can be found here like so:

import {Chart, Title} from 'chart.js';
Chart.register(Title);

Or use the auto import to let chart.js register everything for you:

import 'chart.js/auto'