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

Question

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/

After the comment below that I was looking at the wrong documentation I tried the following:

const labeltext = (tooltipItems) => {
  tooltipItems.forEach(function(tooltipItem) {
    tooltiplabel = '€' + tooltipItem.parsed.y.toLocaleString();
  });
  return tooltiplabel;
};

const configjaar = {
  type: 'line',
  data: datajaar,
  options: {
    plugins:{
      tooltip:{
        callbacks: {
          label: labeltext,
        }
      }
    },
    maintainAspectRatio: false,
  }
};

But this gives me the error: tooltipItems.forEach is not a function. If instead of label I use footer or title it works perfectly, but I don't want to add a title or a footer to my tooltip, I want to replace the existing content with my added € sign.

I also tried using their example for adding a dollar sign like this:

const configjaar = {
  type: 'line',
  data: datajaar,
  options: {
    plugins:{
      tooltip:{
        callbacks: {
          label: function(context) {
              const label = context.dataset.label || '';

              if (label) {
                  label += ': ';
              }
              if (context.parsed.y !== null) {
                  label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
              }
              return label;
          }
        }
      }
    },
    maintainAspectRatio: false,
  }
};

But on hover of a data point this gives an error: Assignment to constant variable.

Answer 1

This is because you are using V2 syntax in V3, V3 has some major breaking changes over V2. Please read the migration guide for all of them.

For your callback to work you need to define it in options.plugins.tooltip.callbacks.label

EDIT:

Like the error says you are getting you can't reassign a constant variable since its a constant. If you change it to a let it works fine:

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'pink'
    }]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            let label = context.dataset.label || '';

            if (label) {
              label += ': ';
            }
            if (context.parsed.y !== null) {
              label += new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD'
              }).format(context.parsed.y);
            }
            return label;
          }
        }
      }
    },
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>