B. Clay Shannon B. Clay Shannon - 2 months ago 5
Javascript Question

How to commaize the data values provided to a chart in Chart.JS?

I've got this code to add data to a chart:

datasets: [
{
data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
. . .


I want it to be commaized, so that "2755" appears as "2,755" etc. So I tried this::

datasets: [
{
data: [addCommas(2755), addCommas(2256), addCommas(1637), addCommas(1608), addCommas(1603), addCommas(1433), addCommas(1207), addCommas(1076), addCommas(1056), addCommas(1048)],
. . .

function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}


...but that almost completely obliterates my pie; the pie itself is invisible, although the legend I've added is visible albeit mangled.

This fails with the same exact effect:

data: ["2,755", "2,256", "1,637", "1,608", "1,603", "1,433", "1,207", "1,076", "1,056", "1,048"],


Since the data is embedded within a canvas, I don't think I can apply some easy universal solution, but if there is, that'd be great; otherwise, what is a way to accomplish this commaification of numeric values?

UPDATE



I want to try felipeptcho's answer, but I don't know where exactly to put that code within what I've got, which is this:

var formatter = new Intl.NumberFormat("en-US");
var data = {
labels: [
"Bananas (18%)",
"Lettuce, Romaine (14%)",
"Melons, Watermelon (10%)",
"Pineapple (10%)",
"Berries (10%)",
"Lettuce, Spring Mix (9%)",
"Broccoli (8%)",
"Melons, Honeydew (7%)",
"Grapes (7%)",
"Melons, Cantaloupe (7%)"
],
datasets: [
{
data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
backgroundColor: [
"#FFE135",
"#3B5323",
"#fc6c85",
"#ffec89",
"#021c3d",
"#3B5323",
"#046b00",
"#cef45a",
"#421C52",
"#FEA620"
]
}]
};

var optionsPie = {
responsive: true,
scaleBeginAtZero: true
}

var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx,
{
type: 'pie',
data: data,
options: optionsPie
});

$("#top10Legend").html(top10PieChart.generateLegend());


UPDATE 2



It is still not working; here's what it looks like after adding that code:

enter image description here

This is what it looks like without the new code, hovering over bananas (showing "2755" which I would like to be "2,755"):

enter image description here

Simply commenting out this:

data.datasets.forEach(function (dataset) {
dataset.data = dataset.data.map(formatter.format);
});


...returns it to its previous appearance, but I still don't have the values commaized, of course.

This is my code which breaks the pie (when the code above is not commented out):

var formatter = new Intl.NumberFormat("en-US");
var data = {
labels: [
"Bananas (18%)",
"Lettuce, Romaine (14%)",
"Melons, Watermelon (10%)",
"Pineapple (10%)",
"Berries (10%)",
"Lettuce, Spring Mix (9%)",
"Broccoli (8%)",
"Melons, Honeydew (7%)",
"Grapes (7%)",
"Melons, Cantaloupe (7%)"
],
datasets: [
{
data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
backgroundColor: [
"#FFE135",
"#3B5323",
"#fc6c85",
"#ffec89",
"#021c3d",
"#3B5323",
"#046b00",
"#cef45a",
"#421C52",
"#FEA620"
]
}
]
};
data.datasets.forEach(function (dataset) {
dataset.data = dataset.data.map(formatter.format);
});

var optionsPie = {
responsive: true,
scaleBeginAtZero: true
}

var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx,
{
type: 'pie',
data: data,
options: optionsPie
});

$("#top10Legend").html(top10PieChart.generateLegend());


UPDATE 3



Wait a minute - I updated that last screenshot above without really paying attention to its appearance, and it has already been fixed. All it took was adding this line, as mentioned felipeptcho:

var formatter = new Intl.NumberFormat("en-US");


Without it, the values contain no commas; with it, they do - nothing else required!

Answer
var formatter = new Intl.NumberFormat("en-US");
var datasets = [{data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048]}];

datasets.forEach(function (dataset) {
    dataset.data = dataset.data.map(formatter.format);
});

// Output: [{"data":["2,755","2,256","1,637","1,608","1,603","1,433","1,207","1,076","1,056","1,048"]}]
console.log(datasets);

UPDATE:

var formatter = new Intl.NumberFormat("en-US");
var data = {labels: ["..."], datasets: [{data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048], backgroundColor: ["..."]}]};

data.datasets.forEach(function (dataset) {
    dataset.data = dataset.data.map(formatter.format);
});

// Output: {"labels":["..."],"datasets":[{"data":["2,755","2,256","1,637","1,608","1,603","1,433","1,207","1,076","1,056","1,048"],"backgroundColor":["..."]}]}
console.log(data);