1

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 plugins chartjs-plugin-datalabels I have loaded this plugin as below in the code and registered the plugin as specified in the plugin documentation 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');
        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 where the values are not getting displayed on each bars: enter image description here

Improve this question

1 Answer 1

Reset to default
1

You need to call Chart.register to register the plugin.

Chart.register(ChartDataLabels);

Also, you should be able to import both at the same time, to decrease loading time:

Promise.all([
    loadScript(this, chartjs),
    loadScript(this, ChartDataLabels)
]);

Demo.

Improve this answer
5
  • thanks for the reply, I have followed your approach, so when I try to register using 'Chart.register(ChartDataLabels)' I am getting the following error as 'Uncaught (in promise) TypeError: d.default.register is not a function at eval'
    – Sagar
    Commented Sep 7, 2022 at 13:19
  • @Sagar Interesting. I'm not sure what else to say at the moment, you'll want to try debugging. It might be a missing dependency or something. Have you tried building it from scratch? Also, have you tried just using it as an ES6 module, as demonstrated in this answer? Many libraries that are ES6 compatible work well in LWC; you just have to copy-paste the source into a JS file, then import it as normal.
    – sfdcfox ♦
    Commented Sep 7, 2022 at 14:35
  • I was able to resolve this error 'Uncaught (in promise) TypeError: d.default.register is not a function at eval', and I was able to display the chart, but still the labels are not getting displayed on the bars
    – Sagar
    Commented Sep 11, 2022 at 15:08
  • Finally I was able to resolve it, thanks for the suggestion @sfdcfox
    – Sagar
    Commented Sep 13, 2022 at 16:15
  • 1
    @sagar Posting how you were able to resolve these errors would've been helpful. I'm getting similar error when adding Chart.register(ChartDataLabels)
    – ddeve
    Commented Jun 12, 2023 at 2:38

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .