Chartjs Plugins

Data Labels

I wanted to show the data on each chart so that when they are downloaded the data makes sense.

1
npm i chartjs-plugin-datalabels --save

Not sure if its the best way but I created a component which I then add to the DOM as a fragment containing the config for all charts and the plugins.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React from "react";
import ChartDataLabels from 'chartjs-plugin-datalabels';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
ArcElement
} from 'chart.js';

ChartJS.register(
// plugin to show data lables
ChartDataLabels,

// bar
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,

// pie
ArcElement
);

ChartJS.defaults.set('plugins.datalabels', {
color: '#000000' // set the data lable colour
});

const ChartConfig = () => {
return <></>
}

export default ChartConfig

References