I am trying to format numbers in chartjs chart. I am getting this error on my console and the numbers are not visible on the chart

Uncaught TypeError: Cannot read property 'format' of undefined

You can refer the fiddle here. Line 74 on the fiddle

for (var i = 0; i < firstDataSet.data.length; i++) {
                            var firstModel = firstDataSet._meta[Object.keys(firstDataSet._meta)[0]].data[i]._model;
                            var secondModel = secondDataSet._meta[Object.keys(secondDataSet._meta)[0]].data[i]._model;
                            var thirdModel = thirdDataSet._meta[Object.keys(thirdDataSet._meta)[0]].data[i]._model;
                            var fourthModel = fourthDataSet._meta[Object.keys(fourthDataSet._meta)[0]].data[i]._model;
                            var total = firstDataSet.data[i] + secondDataSet.data[i];
                            var total1 = thirdDataSet.data[i] + fourthDataSet.data[i];
   // Line below is causing the error 


 ctx.fillText(formatter.format(Number(firstDataSet.data[i])) + " ", firstModel.x, firstModel.y + 20); 

                            ctx.fillText((firstDataSet.data[i]) , firstModel.x, firstModel.y + 20);
                            ctx.fillText((secondDataSet.data[i] ) , secondModel.x, secondModel.y + 20);
                            ctx.fillText(total , secondModel.x, secondModel.y - 20);
                            ctx.fillText((thirdDataSet.data[i]) , thirdModel.x, thirdModel.y + 20);
                            ctx.fillText((fourthDataSet.data[i] ) , fourthModel.x, fourthModel.y + 20);
                            ctx.fillText(total1 , fourthModel.x, fourthModel.y - 20);
                            /*if (firstDataSet.data[i] >= secondDataSet.data[i]) {
                                ctx.fillText((firstDataSet.data[i] * 100 / total).toFixed(2) + '%', firstModel.x, firstModel.y + 30);
                            } else {
                                ctx.fillText((secondDataSet.data[i] * 100 / total).toFixed(2) + '%', secondModel.x, secondModel.y + 30);
                            }
                            */
                        }

var formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  // the default value for minimumFractionDigits depends on the currency
  // and is usually already 2
});

I am trying to format numbers in chartjs chart. I am getting this error on my console and the numbers are not visible on the chart

Uncaught TypeError: Cannot read property 'format' of undefined

You can refer the fiddle here. Line 74 on the fiddle

for (var i = 0; i < firstDataSet.data.length; i++) {
                            var firstModel = firstDataSet._meta[Object.keys(firstDataSet._meta)[0]].data[i]._model;
                            var secondModel = secondDataSet._meta[Object.keys(secondDataSet._meta)[0]].data[i]._model;
                            var thirdModel = thirdDataSet._meta[Object.keys(thirdDataSet._meta)[0]].data[i]._model;
                            var fourthModel = fourthDataSet._meta[Object.keys(fourthDataSet._meta)[0]].data[i]._model;
                            var total = firstDataSet.data[i] + secondDataSet.data[i];
                            var total1 = thirdDataSet.data[i] + fourthDataSet.data[i];
   // Line below is causing the error 


 ctx.fillText(formatter.format(Number(firstDataSet.data[i])) + " ", firstModel.x, firstModel.y + 20); 

                            ctx.fillText((firstDataSet.data[i]) , firstModel.x, firstModel.y + 20);
                            ctx.fillText((secondDataSet.data[i] ) , secondModel.x, secondModel.y + 20);
                            ctx.fillText(total , secondModel.x, secondModel.y - 20);
                            ctx.fillText((thirdDataSet.data[i]) , thirdModel.x, thirdModel.y + 20);
                            ctx.fillText((fourthDataSet.data[i] ) , fourthModel.x, fourthModel.y + 20);
                            ctx.fillText(total1 , fourthModel.x, fourthModel.y - 20);
                            /*if (firstDataSet.data[i] >= secondDataSet.data[i]) {
                                ctx.fillText((firstDataSet.data[i] * 100 / total).toFixed(2) + '%', firstModel.x, firstModel.y + 30);
                            } else {
                                ctx.fillText((secondDataSet.data[i] * 100 / total).toFixed(2) + '%', secondModel.x, secondModel.y + 30);
                            }
                            */
                        }

var formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  // the default value for minimumFractionDigits depends on the currency
  // and is usually already 2
});

• javascript
• chart.js

• Declare the formatter before window.myBar = new Chart(ctx.... Like so: fiddle – DavidDomain Commented Sep 16, 2017 at 9:28
• Oh great.. that did it. If you can add it as an answer i can accept it – Prady Commented Sep 16, 2017 at 9:30

1 Answer 1

You have to declare the formatter before calling the new Chart constructor function, otherwise it will be undefined inside the options you are passing as the second parameter of new Chart.

var formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  // the default value for minimumFractionDigits depends on the currency
  // and is usually already 2
});

window.myBar = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});