Chart JS Tooltip Currency Problem - Stacked Bar Chart

Question

I use ChatJS and i want to add an € Symbol after every number in the Tooltip. On my most charts it works perfectly but the Stacked Bar Chart makes me problems.

Here is an example Code like mine (Just a basic Example)

var barChart = new Chart(ctx_barChart, {
  type: 'bar',
  data: {
    labels: ["Fruits"],
    datasets: [{
        label: [
          ["Apple"]
        ],
        data: [12],
        backgroundColor: 'blue',
        barThickness: 80,
      },
      {
        label: ["Banana"],
        data: [15],
        backgroundColor: 'red',
        barThickness: 80,
      },
    ]
  },
  options: {
    maintainAspectRatio: false,
    indexAxis: 'y',
    responsive: true,
    scales: {
      x: {
        stacked: true,
        display: false,
      },
      y: {
        stacked: true,
        display: false,
        mirror: true,
      }
    },
    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: 'EUR'
              }).format(context.parsed.y);
            }
            return label;
          }
        }
      },
      legend: {
        display: false
      },
      title: {
        display: false,
      },
    },
  },
});

The tooltips both show 0,00$, but not my Values 12 and 15. Anyone have an suggestiont?

Answer 1

You should use context.parsed.x instead of context.parsed.y since it's a horizontal bar chart.

Please take a look at your amended code and see how it works.

new Chart('barChart', {
  type: 'bar',
  data: {
    labels: ["Fruits"],
    datasets: [{
        label: "Apple",
        data: [12],
        backgroundColor: 'blue',
        barThickness: 80,
      },
      {
        label: "Banana",
        data: [15],
        backgroundColor: 'red',
        barThickness: 80,
      },
    ]
  },
  options: {
    maintainAspectRatio: false,
    indexAxis: 'y',
    responsive: true,
    scales: {
      x: {
        stacked: true,
        display: false,
      },
      y: {
        stacked: true,
        display: false,
        mirror: true,
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: ctx => ctx.dataset.label + ': ' + new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(ctx.parsed.x)
        }
      },
      legend: {
        display: false
      },
      title: {
        display: false,
      },
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="barChart" height="100"></canvas>