未捕获的TypeError：无法读取未定义的属性“格式”

Question

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
});

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
});