Chartjs-React-Chartjs-2 and Chartjs v3:Option Property

by

0👍

react-chartjs-2 uses the Chart.js library, so you can also refer to the Chart.js docs.

Below is an example of the options used on a Line chart:

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Chart.js Line Chart',
    },
  },
}

As mentioned in the docs above, there are multiple levels of context objects that can be used. For example, if you want to customize the tooltip values or formatting, you can use the tooltip context object:

const options = {
  responsive: true,
  plugins: {
    tooltip: {
      // your customization goes here
    },
  },
}

For information on what configuration settings are available for the tooltip or other options, see the Configuration section of the docs.

I’d suggest reading through the Chart.js docs and also taking a look at the working examples that can be found in the Samples section.

Leave a comment