[Chartjs]-Chart.js Currency Tooltip

by

1👍

Have a look at the snippet below, which shows "$100" and "$20" labels in the tooltip.

I didn’t really change your code, just put it all together. Make sure your code looks like this, and if you’re doing something different please update your post!

const config = {
  type: "bar",
  data: {
    labels: ["Budgeted", "Over Budget", "Remaining"],
    datasets: [
      {
        data: [100, 20, 0],
        backgroundColor: ["#1ab394", "#ed5565", "#e7e7e7"],
        borderColor: ["#1ab394", "#ed5565", "#e7e7e7"],
        borderWidth: 1,
      },
    ],
  },
  options: {
    legend: false,
    tooltips: {
      callbacks: {
        label: function (tooltipItem, data) {
          return (
            "$" +
            tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
          );
        },
      },
    },
  },
};

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, config);
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>

<canvas id="chartJSContainer" width="600" height="400"></canvas>

Leave a comment