How to add commas to labels in Chartist.JS

Question

I've got the following chart:

I want to add commas to the Y labels however nothing seems to be working. I've tried a bunch of answers from the community such as this one however nothing changes. Maybe it's due to version differences? My full chart code below:

<div class="ct-chart ct-major-eleventh graph"></div>

<script>
    new Chartist.Line('.ct-chart', {
      labels: {{ chart_labels }},
      series: [{{ chart_values }}, {{ chart_values }} ]
    }, {
        low: {{ chart_low }},
        showArea: true,
        axisX: {
            labelInterpolationFnc: function skipLabels(value, index) {
                return index % 3  === 0 ? value : null;
            }
        },
        ticks: {
            beginAtZero: true,
            callback: function(label, index, labels) {
                return Intl.NumberFormat('hi', { style: 'currency', currency: 'USD', minimumFractionDigits: 2 }  )
                .format(label).replace(/^(\D+)/, '$1 ');
            },
        }
    });
</script>

I'm also in the same boat! However my issue involves dates on the x-axis. If I add a comma to the initial data, then chartist treats it like a delimiter and the graph gets all mucked up, regardless if I encase it in single or double quotes. Callback also seems to do squat for me (as in it doesn't change the data at all). I thought maybe if there's a way to change the delimiter used then that could work, but I can't find anything pertaining to delimiters and chartist. I've added an issue on the chartist github issue queue: https://github.com/gionkunz/chartist-js/issues/1227 — Liz, Mar 06 '20 at 17:55

score 1 · Answer 1 · edited Apr 21 '20 at 00:35

Include this function in your script section:

Number.prototype.format = function (n, x) {
  var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\.' : '$') + ')';
  return this.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$&,');
};

Then, in your axisY section, include this:

labelInterpolationFnc: function (value) {
  var temp = Number(value).format(0);
  return temp;
},

The format(0) sets the decimal places.

How to add commas to labels in Chartist.JS

1 Answers1