How can I add a euro sign (€) to all tooltips in my chart js line chart


I’ve got a line chart that has a tooltip on each data point. The data are prices so I want to add a euro sign before them but this seems harder than it sounds.

My code:

const labelsjaar = [
  'jan',
  'feb',
  'mrt',
  'apr',
  'mei',
  'jun',
    'jul',
    'aug',
    'sept',
    'okt',
    'nov',
    'dec',
];
const datajaar = {
  labels: labelsjaar,
  datasets: [{
    label: 'Omzet',
    backgroundColor: 'rgb(230 0 126)',
    borderColor: 'rgb(230 0 126)',
    data: [0,0,0,0,0,0,0,24,177,590.44,801.38,98.62],
  }]
};
Chart.defaults.font.family = 'Panton';
Chart.defaults.font.size = 16;
const configjaar = {
  type: 'line',
  data: datajaar,
  options: {
    maintainAspectRatio: false,
    tooltips: {
      enabled: true,
      mode: 'single',
      callbacks: {
        label: function (tooltipItems, data) {
            var i = tooltipItems.index;
            return data.labels[i] + ': ' + data.datasets[0].data[i] + ' €';
        }
      }
    }
  }
};
const myChartjaar = new Chart(
    document.getElementById('myChartjaar'),
    configjaar
);

I found this solution online:

tooltips: {
  enabled: true,
  mode: 'single',
  callbacks: {
    label: function (tooltipItems, data) {
        var i = tooltipItems.index;
        return data.labels[i] + ': ' + data.datasets[0].data[i] + ' €';
    }
  }
}

But my tooltips remain unchanged, there is no euro sign to be seen.

What am I doing wrong?

A jsfiddle of my chart can be seen here: https://jsfiddle.net/r4nw91bo/

Source: JavaSript – Stack Overflow

November 23, 2021
Category : News
Tags: chart.js | charts | javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.