How to set default callback for tooltip title with chart.js

Question

I'm using Chart.js to draw several bar charts. I want to modify the default content of the tooltip of all my chart.

But the following code doesn't work:

 Chart.defaults.global.tooltips.callbacks.title = function(tooltipItems, data) { return "Overriden title"; // This code is not executed }; new Chart($("#barchart"), { type: 'horizontalBar', data: { "labels": ["Label"], "datasets": [{ "data": [42] }] }, }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script> <canvas id="barchart" width="80" height="20"></canvas> 

I know I could pass the callback as an option in each of the Chart constructor, but I would like to set it as a global option.

Answer 1

Replace key global with horizontalBar

 Chart.defaults.horizontalBar.tooltips.callbacks.title = function(tooltipItems, data) { return "Overriden title"; // This code is executed }; new Chart($("#barchart"), { type: 'horizontalBar', data: { "labels": ["Label"], "datasets": [{ "data": [42] }] }, }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script> <canvas id="barchart" width="80" height="20"></canvas>