How to use React with Chart js and plugins

React with ChartJS

How to implement Basic Chart js in React

STEP 1: install chart js library to your project.

npm install — save react-chartjs-2 chart.js

STEP 2: import in your component

import { Doughnut } from ‘react-chartjs-2’;

STEP 3: Used and Configured According Requirements

import React from 'react';
import { Doughnut } from 'react-chartjs-2';
const data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)',
      ],
      borderWidth: 1,
    },
  ],
};
const DoughnutChart = () => (
  <>
    <div className='header'>
      <h1 className='title'>Doughnut Chart</h1>
      <div className='links'>
        <a
          className='btn btn-gh'
          href='https://github.com/reactchartjs/react-chartjs-2/blob/master/example/src/charts/Doughnut.js'
        >
          Github Source
        </a>
      </div>
    </div>
    <Doughnut data={data} />
  </>
);
export default DoughnutChart;

How To Use label plugin in Chartjs-plugin-data labels.

STEP 1:install chartjs-plugin-data labels.

npm install chartjs-plugin-datalabels --save

STEP 2: import and register

import {Chart} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

STEP 3: register chart-js to chartDataLabels

// Register the plugin to all charts:
Chart.register(ChartDataLabels);

STEP 4:now configured chart-js

{
  type: 'doughnut',
  data: {
    labels: labels,
    datasets: [{
      backgroundColor: Utils.colors({
        color: Utils.color(0),
        count: DATA_COUNT
      }),
      data: Utils.numbers({
        count: DATA_COUNT,
        min: 0,
        max: 100
      }),
      datalabels: {
        anchor: 'end'
      }
    }, {
      backgroundColor: Utils.colors({
        color: Utils.color(1),
        count: DATA_COUNT
      }),
      data: Utils.numbers({
        count: DATA_COUNT,
        min: 0,
        max: 100
      }),
      datalabels: {
        anchor: 'center',
        backgroundColor: null,
        borderWidth: 0
      }
    }, {
      backgroundColor: Utils.colors({
        color: Utils.color(2),
        count: DATA_COUNT
      }),
      data: Utils.numbers({
        count: DATA_COUNT,
        min: 0,
        max: 100
      }),
      datalabels: {
        anchor: 'start'
      }
    }]
  },
  options: {
    plugins: {
      datalabels: {
        backgroundColor: function(context) {
          return context.dataset.backgroundColor;
        },
        borderColor: 'white',
        borderRadius: 25,
        borderWidth: 2,
        color: 'white',
        display: function(context) {
          var dataset = context.dataset;
          var count = dataset.data.length;
          var value = dataset.data[context.dataIndex];
          return value > count * 1.5;
        },
        font: {
          weight: 'bold'
        },
        padding: 6,
        formatter: Math.round
      }
    },
// Core options
    aspectRatio: 4 / 3,
    cutoutPercentage: 32,
    layout: {
      padding: 32
    },
    elements: {
      line: {
        fill: false
      },
      point: {
        hoverRadius: 7,
        radius: 5
      }
    },
  }
}

STEP 5:setup plugin

var DATA_COUNT = 10;
var labels = [];
Utils.srand(4);
for (var i = 0; i < DATA_COUNT; ++i) {
  labels.push('' + i);
}

How To Create Own Plugin Using Chart-JS in REACT

STEP 1: First Decide Use Case Why we want to create plugin means here in my case I want to display text in center of my chart.

STEP 2: Create Plugin

const counter = {
id: 'counter',
beforeInit: function (chart) {
// Get reference to the original fit function
const originalFit = chart.legend.fit;
// Override the fit function
chart.legend.fit = function fit() {
// Call original function and bind scope in order to use `this` correctly inside it
originalFit.bind(chart.legend)();
this.height += 35;
};
},

STEP 3: Register Plugin

Chart.register(counter);

STEP 4: Add along with label plugin

plugins: {
datalabels: {
backgroundColor: ['#416872', '#a5b0b5', '#84BDC9', '#1f3b42'],
borderColor: 'white',
borderRadius: 50,
borderWidth: 3,
color: 'white',
//If you want to customize color implement following function
// color: function (context) {
//   var index = context.dataIndex;
//   var value = context.dataset.data[index];
//   if (index === 1) {
//     return (value = 'black');
//   } else {
//     return (value = '#fff');
//   }
// },
display: function (context) {
var dataset = context.dataset;
var count = dataset.data.length;
var value = dataset.data[context.dataIndex];
return value > count * 1.5;
},
font: {
weight: 'bold',
size: '18',
},
offset: 2,
padding: 10,
formatter: Math.round,
},
counter: {
fontColor: '',
fontSize: '32px',
text: '$' + sum.toString(),
font: '',
},
subHeading: {},
},

For Entire Reference

https://github.com/yash001dev/workingwithchartjs
https://chartjs-plugin-datalabels.netlify.app/