CODEWITHSUNDEEP
reactjstypescriptchartspluginschart.js
SchLu
SchLu

Reputation: 75

chartjs plugin datalabels does not show value on charts

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

Upvotes: 2

Views: 2535

Answers (2)

Mayank Gauba
Mayank Gauba

Reputation: 11

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

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

  1. import ChartDataLabels from "chartjs-plugin-datalabels";

  2. In TsChart tag add plugins props which accepts

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

Upvotes: 1

LeeLenalee
LeeLenalee

Reputation: 31439

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

Upvotes: 3

Related Questions