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

"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 ?

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

"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 ?

• javascript
• reactjs
• chart.js
• jsx

2 Answers 2

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

To fix it either import and registr every ponent you are using, list of all ponents 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'

Use this:

a) Ensure you have installed chart.js:

npm install chart.js

b) Import Chart and Title as shown below:

import { Chart, Title } from "chart.js";

c) Register Title as show below:

Chart.register(Title);

d) Then set the title as given below:

options: {
  responsive: true,
  plugins: {
     title: {
        display: true,
        text: 'Bar Chart'
      }
   }
}