0

I found this code on stakoverflow for my chart with charts.js. I need to set as format of my string of value the euro(€) currency, but if I put the € instead of the $, it gets rendered in a strange way and on my chart appears what it is on the image.

scales: {
    yAxes: [{
      stacked: true,
      gridLines: {
        display: true,
        color: "rgba(255,99,132,0.2)",

      },
        ticks: {
            fontSize: 18,
                        fontColor: 'rgba(159, 220, 141, 0.7)',

                        userCallback: function(value, index, values) {
            // Convert the number to a string and splite the string every 3 charaters from the end
            value = value.toString();
            value = value.split(/(?=(?:...)*$)/);

            // Convert the array to a string and format the output
            value = value.join('.');
            return '$ ' + value;
        }}

Thank you in advance for your help.

Carlotta Bacchini
  • 1

1 Answers1

0

The value formatting for the ticks should be placed inside:

scales: {
    yAxes: [{
        ticks: {
            fontSize: 18,
            callback: function(label, index, labels) {
                // PLACE HERE
            }
        }
    }]
}

If you had a small fiddle, I could have played with it more but here is an example you can refer to: How do I customize y-axis labels on a Chart.js line chart?

Tom Phan
  • 76
  • 2
  • [In the docs](https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats) it's advised to use the parameters `value, index, values`. For your use case, OP, you should use: `callback: function(value, index, values) { return value + '€'; }` – HeadhunterKev Nov 25 '19 at 09:51
  • But even if I use this code, the page doesn't render the € symbol correctly, but it does if I put $ symbol. It seems like charts.js can't read that symbol – Carlotta Bacchini Nov 25 '19 at 10:18
  • @CarlottaBacchini it might help if you add a small JS fiddle? doesn't necessarily have to be your code but just a small snippet with the axis issues you're running into – Tom Phan Nov 25 '19 at 23:41