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>
Source:stackexchange.com