[Chartjs]-How to format tool tip as currency in piechart chartJS?

by

1👍

✅

you can use a tooltips callback function.

here, the label callback is used to customize the tooltip content…

    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          return data['labels'][tooltipItem['index']] + ': $' + data['datasets'][0]['data'][tooltipItem['index']];
        }
      }
    }

see following working snippet…

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['confirmed', 'pending'],
    datasets: [{
      data: [67, 33],
      backgroundColor: [
        'rgba(41, 121, 255, 1)',
        'rgba(38, 198, 218, 1)'
      ],
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Dollar per Sub Issue Type'
    },
    legend: {
      display: true,
      labels: {
        display: false,
        fontSize: 10
      }
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          return data['labels'][tooltipItem['index']] + ': $' + data['datasets'][0]['data'][tooltipItem['index']];
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment