Getting dependency error while installing 'chartjs-plugin-datalabels'

[NandhiniMuthuramalingam]

Hello All,

How to build a doughnut chart only using chart.js and typescript?

I have the following versions
"chart.js": "^3.3.2" and "@types/chart.js": "^2.9.32".

I am able to display the chart. But I want to achieve the below requirements as well.

Display text inside the doughtnut chart
Display DataLabels in each segment
Need to change the color of hidden legend instead of Strike-Through
I am getting the dependency error when I try to install npm chartjs-plugin-datalabels.

npm ERR! node_modules/chart.js
npm ERR! chart.js@"^3.3.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer chart.js@">= 2.7.0 < 3" from chartjs-plugin-datalabels@1.0.0
npm ERR! node_modules/chartjs-plugin-datalabels

Any suggestion please to resolve this issue?

Thanks!

[LeeLenaleee]

You need to install the beta of the datalabels plugin since that's the only version that supports V3 ATM, you do this by adding @next behind the packagename if you install it, also you don't have to use the @types package anymore since chart.js V3 comes with build in typing

[NandhiniMuthuramalingam]

Thanks @LeeLenaleee

I was able to install using this command npm install chartjs-plugin-datalabels@next. But labels are not rendered. If possible, can you please provide the code snippet.

Also, I am trying display text inside the doughnut chart using Chart.pluginService.register. But getting the error 'Property chart does not exist on type'

Chart.pluginService.register({ beforeDraw: function (chart) { var width = chart.width, height = chart.chart.height, ctx = chart.chart.ctx; ctx.restore(); var fontSize = (height / 114).toFixed(2); ctx.font = fontSize + "em sans-serif"; ctx.textBaseline = "middle"; var text = val + "%", textX = Math.round((width - ctx.measureText(text).width) / 2), textY = height / 2; ctx.fillText(text, textX + 20, textY + 10); ctx.save(); } });

Any suggestion please?

Thanks,

[LeeLenaleee]

https://master--chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#registration
https://www.chartjs.org/docs/master/developers/plugins.html

[NandhiniMuthuramalingam]

Thanks @LeeLenaleee , But still not working

1. Manually registered plugin for a specific chart, but still labels are not rendered and getting the below error if using formatter
   a) Parameter 'Value' implicitly has an any type
   b) Parameter 'ctx' implicitly has an any type

2. Also, tried with Chart.plugins.register to display text inside doughnut chart. But getting the same error 'Property chart does not exist on type'

Code Snippet :

import Chart from 'chart.js/auto';
import ChartDataLabels from 'chartjs-plugin-datalabels';

var titleValue =  ["High Risk", "Low Risk", "Medium Risk"];
   	 var dataValue = [0.84,0.13,.03];
   	
   	let chartOptions:  Chart.ChartOptions = {
   	    plugins:{
   			datalabels: {
   				formatter: dataValue + "%",
   				color: '#fff',
   			}
   		},
   		legend: {
   			display: true, 
   			labels: {
   				fontColor: '#000000'
   			}, 
   			position: 'bottom'
   		},
   		plugin :{
   			datalabels: {
   				color: '#FFFFFF',
   				textAlign: 'center',
   				font: {
   					lineHeight: 1.6
   				},					
   				display: true
   			}
   		},
   		//scale: scaleOptions,
   		responsive: true,
   		animation: {
   			animateScale: true,
   			animateRotate: true
   		},
   		title: {
   			display: true,
   			text: "Sample"
   		},
   	};
   	var _canvasElement = document.createElement('canvas');
   	_canvasElement.id = "myChart";

   	this._container.appendChild(_canvasElement);
   	
   	
   	const chart: Chart = new Chart(_canvasElement, {				
   		data: {
   			labels: labelValue,
   			datasets: [{ label: 'Activity Count', data: dataValue, backgroundColor: ["#F24F21", "#7FBA00", "#00A4EF", "#FFB900", "#006EC4", "#7719AA"] }],
   		},			
   		type : 'doughnut',
   		plugins: [ChartDataLabels],
   		options : chartOptions
   		
   	});
   	
   	Chart.plugins.register({
   		beforeDraw: function (chart) {
   			var width = 100,
   				height = chart.height,
   				ctx = chart.ctx;
   			ctx?.restore();
   			var fontSize = (height / 114).toFixed(2);
   			ctx.font = fontSize + "em sans-serif";
   			ctx.textBaseline = "middle";
   			var text = 10 + "%",
   				textX = Math.round((width - ctx.measureText(text).width) / 2),
   				textY = height / 2;
   			ctx.fillText(text, textX + 20, textY + 10);
   			ctx.save();
   		}
   	});

[LeeLenaleee]

The typing error from the datalabels plugin cant be helped by chart.js because they need to support typescript, also for your own plugin you need to leave away the plugins as you can see in the documentation about custom plugins, it is: Chart.register({pluginId, plugin}).

[kurkle]

The configuration for all the plugins (legend, title, tooltip, datalabels etc) go in options.plugins. So your legend and title configurations are in wrong level. Also the plugin you have there has no effect.