ChartJS add tooltip to a grouped bar chart

Question

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?

Was experimenting with a Fiddle jsfiddle.net/r4hrgu4n , and I couldn't reproduce, maybe there was a problem elsewhere? — Tomas Eglinskas
@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

ɢʀᴜɴᴛ ɢʀᴜɴᴛ · Accepted Answer · 2017-12-21T09:08:23

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>

ChartJS add tooltip to a grouped bar chart

2 Answers