ChartJS with multiple axis custom tooltip not working - chart.js

Question

I'm using the latest version of the chartJS on my Angular 5 application but when I try to call the custom tooltip using the options and the custom function nothing happens.
I added a console.log to see if the function gets called but I do not see it.
Here is my options object.
this.chartOptions = {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: '',
fontStyle: 'bold'
},
animation: {
duration: 0
},
hover: {
animationDuration: 0,
mode: 'nearest',
intersect: true
},
responsiveAnimationDuration: 0,
elements: {
line: {
tension: 0
},
point: {
radius: 5
}
},
scales: {
xAxes: [
{
scaleLabel: {
display: true,
labelString: 'Year',
fontStyle: 'bold'
}
}
],
yAxes: [
{
id: 'y-axis-1',
display: true,
position: 'left',
type: 'linear',
scaleLabel: {
display: true,
labelString: (this.chartUnit === 'U') ? 'Sales (Units)' : 'Sales (USD)',
fontStyle: 'bold'
},
stacked: false,
ticks: {
callback: function(value, index, values) {
const prefix = self.chartUnit === 'D' ? '$' : self.chartUnit === 'P' ? '%' : '';
const numValue = value.toLocaleString();
if (self.chartUnit === 'P') {
return numValue + prefix;
} else {
return prefix + numValue;
}
},
fontStyle: 'bold'
}
},
{
id: 'y-axis-2',
display: true,
position: 'right',
type: 'linear',
gridLines: {
display: true,
drawBorder: true,
drawOnChartArea: false
},
scaleLabel: {
display: true,
labelString: (this.chartUnit === 'U') ? 'Total Sales (Units)' : 'Total Sales (USD)',
fontStyle: 'bold'
},
stacked: false,
ticks: {
callback: function(value, index, values) {
const prefix = self.chartUnit === 'D' ? '$' : self.chartUnit === 'P' ? '%' : '';
const numValue = value.toLocaleString();
if (self.chartUnit === 'P') {
return numValue + prefix;
} else {
return prefix + numValue;
}
},
fontStyle: 'bold'
}
}
]
},
tooltip: {
mode: 'nearest',
custom: function() {
console.log('hello');
}
}
}