Chartjs-Chart JS Tooltip Currency Problem – Stacked Bar Chart

by

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>

Leave a comment