Here is the LwC code:
import { LightningElement,api, wire, track } from 'lwc';
import chartjs from '@salesforce/resourceUrl/chartjs_v280';
import ChartDataLabels from '@salesforce/resourceUrl/ChartjsPluginDataLabels';
import { loadScript } from 'lightning/platformResourceLoader';
export default class ChartDemocmp extends LightningElement {
isChartJsInitialized;
chartConfiguration;
connectedCallback(){
this.setData();
}
setData(){
this.chartConfiguration = {
type: 'bar',
data: {
labels: ["data1","data2","data3","data4","data5","data6","data7"],
datasets: [
{
label: 'dataset',
barPercentage: 0.5,
barThickness: 6,
maxBarThickness: 8,
minBarLength: 2,
backgroundColor: "blue",
data: [65, 59, 80, 81, 56, 55, 40],
},
],
},
plugins: [ChartDataLabels], //plugin register
options: {
resposive:true,
},
};
console.log('chart data---> '+JSON.stringify(this.chartConfiguration));
}
renderedCallback() {
/*if (this.isChartJsInitialized) {
return;
}*/
// load chartjs from the static resource
Promise.all([
loadScript(this, chartjs)
])
.then(()=>{
//load ChartDataLabels from the static resource
Promise.all([
loadScript(this, ChartDataLabels )
])
.then(() => {
console.log('Loaded');
this.isChartJsInitialized = true;
if(this.chart!= null || this.chart!=undefined){
this.chart.destroy();//destory the chart once data is updated to show the new chart
}
const ctx = this.template.querySelector("canvas.barChart").getContext('2d');
Chart.plugins.register(ChartDataLabels);
this.chart = new window.Chart(ctx,JSON.parse(JSON.stringify(this.chartConfiguration)));
//console.log('data chart');
});
})
.catch(error => {
console.error('error chart--> '+JSON.stringify(error))
});
}
}
Here is the screen shot of bar chart below where the values are not getting displayed on each bars:
Values are shown, you just can not see them. Change options: { resposive:true },to options: { resposive:true, scales: { yAxes: [{ ticks: { beginAtZero: true } }]}