How to add datalabels to chartJS on Primefaces - primefaces

Question

I'm creating charts with the new ChartJS lib on Primefaces, but I could not find a way to add the value as label on the bar chart or line chart.
Looking on the internet, I've found a JS plugin called chartjs-plugin-datalabels! that does what I need.
How could I use this plugin on my Java Primefaces application?

Answer 1

Try this...
Add the script to your XHTML page:
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0"></script>
In your Java model for your chart set the Extender feature on.
chartModel.setExtender("chartExtender");
In your XHTML add this JavaScript code function to match when you set in #2 Java bean.
function chartExtender() {
var options = {
plugins: [ChartDataLabels],
options: {
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
color: '#36A2EB'
}
}
},
data: {
datasets: [{
// Change options only for labels of THIS DATASET
datalabels: {
color: '#FFCE56'
}
}]
}
};
//merge all options into the main chart options
$.extend(true, this.cfg.config, options);
};
This was all based on their configuration guide https://chartjs-plugin-datalabels.netlify.com/guide/getting-started.html#configuration But this should at least get the plugin going.