PrimeNg Chart, display labels on data elements in graph.
I assume you have Prior knowledge of using Chart with PrimeNg and Angular 2+.
Is it really easy and quick way to create decent Line, Bar or any other Chart with PrimeNg. When we implement Line Chart using Primeng what we see is something like below:
So here we can see the trend. But here we are not able to see the exact value of the data point. We can say it is between 60–70 or 20–30, but what is the exact value ? For that we can hover over the data points and see the value. But all the times hovering and checking the value is something we don’t like.
So what we are going to implement is, below :
I assume you have a running Project with Angular and Primeng.
Let see quickly how we can create chart. For that we have to install Chartjs
>> npm install chart.js — save
Now in you angular.json file add below :
“scripts”: [
“node_modules/chart.js/dist/Chart.js”
]
For displaying lables we will use chartjs-plugin-datalabels plugin:
>> npm install chartjs-plugin-datalabels
and now finally we have to update our angular.json file like below.
“scripts”: [“node_modules/chart.js/dist/Chart.js”,
“node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js”]
That’s all once you add this. Automatically you would be able to see the labels on data elements. You will see something like this.
Labels are not looking pretty. So now we have to customize our label to make it user friendly.
For the customization datalabels plugin provides some options which we have to add in options attribute of Primeng chart. Suppose below is our code for chart with options. This will show normal Chart with ugly lables.
Update your options like below:
below code I added in option:
plugins: {
datalabels: {
align: ‘end’,
anchor: ‘end’,
borderRadius: 4,
backgroundColor:”teal”,
color: ‘white’,
font: {
weight: ‘bold’
}
}
}
That’s all for customizing data labels in PrimeNg chart. For more details about chart check chartjs-plugin-datalabels.