Skip to main content
I have built simple bar chart with ChartJS version v2.8.0, so now I am trying to display the data values on each bars using chartjs-plugin-datalabels v1.0.0 (https://github.com/chartjs/chartjs-plugin-datalabels/tags) plugins chartjs-plugin-datalabels I have loaded this plugin as below in the code and registered the plugin as specified in the plugin documentation (https://v1_0_0--chartjs-plugin-datalabels.netlify.app/guide/getting-started.html⌗registration) but however the data values are not showing up on each bars.

Can anyone point out what am I missing here? that would be helpful

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:

Chart Js: How to display data values in each bars chartjs
4 answers
  1. Sep 30, 2022, 10:31 PM
    Values are shown, you just can not see them. Change

     options: {

              resposive:true

      },

    to 

    options: {

         resposive:true,

         scales: {

                yAxes: [{

                ticks: {

                   beginAtZero: true

                }

         }]

    }
0/9000