Applying a Custom Tooltip to a Line Graph Widget
I am trying to apply a custom tooltip to a chart following the steps here
https://www.chartjs.org/docs/latest/samples/tooltip/content.html
My options configuration
protected static ?array $options = [
'plugins' => [
'tooltip' => [
'callbacks' => [
'footer' => 'customFooter'
]
]
]
];
My custom footer function which is included in the blade file that the line graph is included as a livewire component
<script>
const customFooter = (tooltipItems) => {
let footerString = '';
tooltipItems.forEach(function(tooltipItem) {
footerString = footerString.concat(": ", tooltipItem.parsed.y);
});
return 'Footer: ' + footerString;
};
</script>
However I get the error in the attached file, the s.footer.apply is not a function
https://www.chartjs.org/docs/latest/samples/tooltip/content.html
My options configuration
protected static ?array $options = [
'plugins' => [
'tooltip' => [
'callbacks' => [
'footer' => 'customFooter'
]
]
]
];
My custom footer function which is included in the blade file that the line graph is included as a livewire component
<script>
const customFooter = (tooltipItems) => {
let footerString = '';
tooltipItems.forEach(function(tooltipItem) {
footerString = footerString.concat(": ", tooltipItem.parsed.y);
});
return 'Footer: ' + footerString;
};
</script>
However I get the error in the attached file, the s.footer.apply is not a function
Open source HTML5 Charts for your website
