score: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>


Related Query

More Query from same tag