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