score:10

Accepted answer

this can be achieved using the following tooltips label callback function :

tooltips: {
   mode: 'label',
   callbacks: {
      label: function(t, d) {
         var dstlabel = d.datasets[t.datasetindex].label;
         var ylabel = t.ylabel;
         return dstlabel + ': ' + ylabel + ' €';
      }
   }
}

fyi: this has nothing to do with scales. it would work perfectly fine along with scales

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var mychart = new chart(ctx, {
   type: 'bar',
   data: {
      labels: ['jan', 'feb', 'mar', 'apr', 'may'],
      datasets: [{
         label: 'dst1',
         backgroundcolor: '#3e95cd',
         data: [3, 2, 4, 5, 1]
      }, {
         label: 'dst2',
         backgroundcolor: '#8e5ea2',
         data: [2, 4, 1, 2, 5]
      }]
   },
   options: {
      scales: {
         yaxes: [{
            ticks: {
               beginatzero: true,
               stepsize: 1
            }
         }]
      },
      title: {
         display: true,
         text: 'title'
      },
      tooltips: {
         mode: 'label',
         callbacks: {
            label: function(t, d) {
               var dstlabel = d.datasets[t.datasetindex].label;
               var ylabel = t.ylabel;
               return dstlabel + ': ' + ylabel + ' €';
            }
         }
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.1/chart.js"></script>
<canvas id="ctx"></canvas>

score:2

a bit late to the party, but i have recently discovered javascript's built-in formatter for currencies, that saves you having to play about with strings and could be helpful here, and is reusable elsewhere in your code!:

const gbp = new intl.numberformat('en-gb', {
    style: 'currency',
    currency: 'gbp',
    minimumfractiondigits: 2
});

being english i have of course done it in gbp, but i found that changing the en-gb to de-de and the 'gbp' to 'eur' worked absolutely fine. even formatting the decimal points and thousand separators correctly.

edit: including how to actually give the formatter a number to format would be useful wouldn't it!

gbp.format(10000); // returns £10,000.00

Related Query

More Query from same tag