0👍
Solved it, perhaps not ideally, but solved it.
Register a plugin that enables the tooltips to remain up, then call the plugin from the options.
Include a script file under where you imported chart.js in your index.html with the following code in it:
Chart.pluginService.register({
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart));
});
});
chart.options.tooltips.enabled = false;
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
});
Then in the options of your chart, include:
options: {
showAllTooltips: true
}
For extra points, you can include it in your app.component.ts, underneath/outside the class however you need to declare Chart with declare var Chart:any;
- Chartjs-ChartJs Memory Leak | Garbage Collection does not clean Chart Object or Arrays after render
- Chartjs-Chartjs populate data with Axios response
Source:stackexchange.com