I'm hoping someone can help me answer my first question ever on stackoverflow!
I'm using the Chart.js v2.5 bundle for a bubble chart visualisation, and I've using the handy showAllTooltips plugin by @potatopeelings, to have a tooltip for every point constantly displayed.
It's working great – now I'd like the ability to toggle each one on and off and have the chart reflect this on chart.update().
To make this a bit less abstract I've made a GIF. Watch it here.
My theory is to manipulate the properties of each tooltip in the pluginTooltips array and then extend chart.update() to check this and render the chart accordingly, but I'm completely stuck on how to practically do this.
Here's some context in psuedo code:
document.getElementById( "chart" ).onclick = function(evt) {
if( bubbleChart.getElementAtEvent(evt).length > 0 ) {
for(var i = 0; i < bubbleChart.data.datasets.length; i++ ) {
var bubble = bubbleChart.data.datasets[i];
if( condition == true ) {
// style bubble active
// show tooltip
} else {
// style bubble inactive
// hide tooltip
}
}
bubbleChart.update();
}
};
Thanks in advance!