Iam trying to add an euro sign to the tooltips of my grouped bar chart using ChartJS. Snipped:

tooltips: {
   mode: 'label',
   callbacks: {
      label: function(tooltipItem, data) {
         return data['datasets'][0]['data'][tooltipItem['index']] + '€';
      }
   }
}

This code works for my linechart, but not for my grouped bar chart. I want my bar chart to look like the following, when I hover it:

But there is no euro sign in my chart, it just display its value. What am I doing wrong?

Thank you.

** Edit

So my full options looked like the following:

options: {
            title: {
                display: true,
                text: 'Title',
            },
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Wert in €'
                    }
                }],
                xAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Zeitintervall'
                    }
                }]
            },
            tooltips: {
                mode: 'label',
                    callbacks: {
                        label: function(tooltipItem, data) {
                            return data['datasets'][0]['data'][tooltipItem['index']] + '€';
                        }
                    }
            }
        }

As soon as i removed the scales, it is showing the euro sign. So my options now look like the following:

options: {
            title: {
                display: true,
                text: 'Title'
            },
            tooltips: {
                mode: 'label',
                callbacks: {
                    label: function(tooltipItem, data) {
                        return data['datasets'][0]['data'][tooltipItem['index']] + ' €';
                    }
                }
            }
        }

But now i got another problem, it shows the same value for two different bars:

You can see clearly that the values are not the same. Whats the problem here?

Iam trying to add an euro sign to the tooltips of my grouped bar chart using ChartJS. Snipped:

tooltips: {
   mode: 'label',
   callbacks: {
      label: function(tooltipItem, data) {
         return data['datasets'][0]['data'][tooltipItem['index']] + '€';
      }
   }
}

This code works for my linechart, but not for my grouped bar chart. I want my bar chart to look like the following, when I hover it:

But there is no euro sign in my chart, it just display its value. What am I doing wrong?

Thank you.

** Edit

So my full options looked like the following:

options: {
            title: {
                display: true,
                text: 'Title',
            },
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Wert in €'
                    }
                }],
                xAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Zeitintervall'
                    }
                }]
            },
            tooltips: {
                mode: 'label',
                    callbacks: {
                        label: function(tooltipItem, data) {
                            return data['datasets'][0]['data'][tooltipItem['index']] + '€';
                        }
                    }
            }
        }

As soon as i removed the scales, it is showing the euro sign. So my options now look like the following:

options: {
            title: {
                display: true,
                text: 'Title'
            },
            tooltips: {
                mode: 'label',
                callbacks: {
                    label: function(tooltipItem, data) {
                        return data['datasets'][0]['data'][tooltipItem['index']] + ' €';
                    }
                }
            }
        }

But now i got another problem, it shows the same value for two different bars:

You can see clearly that the values are not the same. Whats the problem here?

• javascript
• charts
• chart.js

• 1 Are you using Chart.js v2? – Tomas Eglinskas Commented Dec 20, 2017 at 22:10
• @TomasEglinskas Iam using version 2.7.1 – Moritz Schmidt Commented Dec 20, 2017 at 22:14
• 1 Was experimenting with a Fiddle jsfiddle/r4hrgu4n , and I couldn't reproduce, maybe there was a problem elsewhere? – Tomas Eglinskas Commented Dec 20, 2017 at 22:18
• @TomasEglinskas Oh wow thats weird, I thought I had an error in my logic, but if it worked for you there has to be something else wrong. Thank you very much!! – Moritz Schmidt Commented Dec 20, 2017 at 22:20
• 1 Hope it helped! – Tomas Eglinskas Commented Dec 20, 2017 at 22:30

2 Answers 2

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./ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<canvas id="ctx"></canvas>

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