chartjs plugin datalabels does not show value on charts

Question

I'm trying to get the values on each bar with the chartjs datalabels plugin. So above the bar 'a' a want to see the number 30 and above or inside bar 'b' I want to see the number 50.

But it isn't showing any values at all.

Can anyone help and tell me what's wrong?

I've also tried to use different versions of chartjs but it didn't help.

Currently I'm using Chartjs 3.2.0 and for the chartjs-plugin-datalabels 2.0.0

here is an example in codesandbox https://codesandbox.io/s/chart-js-plugin-5ez9p?file=/src/App.tsx

user_8682983 · Answer

As per the documentation you still need to register the plugin before you can use it:

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

Chart.register(ChartDataLabels);

Working codesandbox: https://codesandbox.io/s/chart-js-plugin-forked-dig8k?file=/src/App.tsx

user_16702720 · Answer

First you need to register the chartjs-plugin-datalabels plugin.

For Registration you can also add plugins props to your TsChart.

import ChartDataLabels from "chartjs-plugin-datalabels";
In TsChart tag add plugins props which accepts

Chart.PluginServiceRegistrationOptions[]
 
Eg. **TsChart type="bar" data={data} options={options} plugins={[ChartDataLabels]}**

chartjs plugin datalabels does not show value on charts

2 Answers