Chartjs-Chart.js adding tooltip with cashflow

by

0👍

Change the tooltips.callbacks.footer function as follows and it will work as expected.

tooltips: {
  callbacks: {
    footer: tooltipItem => 'Cashflow: ' + cashFlow[tooltipItem[0].index]
  }
},

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

var cashFlow = [86.84, -36.36];

var timeOfPaymentChart = new Chart('myChart', {
  type: 'bar',
  data: {
    labels: ['MultiSafePay', 'Koll'],
    datasets: [{
      label: 'Days between invoice and payment ',
      data: [38, 22],
      backgroundColor: '#FFFFFF',
      borderWidth: 1,
      borderColor: 'white',
      hoverBorderWidth: 3,
      hoverBorderColor: 'white'
    }],
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          fontColor: '#FFFFFF',
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true,
          fontColor: '#FFFFFF',
        }
      }]
    },
    tooltips: {
      callbacks: {
        footer: tooltipItem => 'Cashflow: ' + cashFlow[tooltipItem[0].index]
      }
    },
    legend: {
      display: false,
    }
  }
});
body {
  background: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

Leave a comment