chartjs-plugin-zoom icon indicating copy to clipboard operation
chartjs-plugin-zoom copied to clipboard

close tooltips when zooming, panning, grabbing (1.0.1)

Open pmbert opened this issue 4 years ago • 3 comments

I think it would be good to close the tooltip box when zooming, panning, grabbing....

pmbert avatar Jun 22 '21 16:06 pmbert

I agree that would be a nice improvement. For now I employed this solution which works pretty well:

onPanStart: ({ chart }) => {
  chart.config.options.plugins.tooltip.enabled = false
},
onPanComplete: ({ chart }) => {
  chart.config.options.plugins.tooltip.enabled = true
  chart.update()
},

Without update() the tooltip would not come back until e.g. the next time I zoomed. An ugly thing is that when the pan completes and the tooltip is shown again, it's not shown at the current mouse position but at the same point/position as when the panning started, so you need to nudge the mouse a bit for it to jump into place.

Edit: Instead of reenabling the tooltip onPanComplete(), I moved that to the general onHover of the chart. That way the tooltip doesn't reappear until there is a new event, with relevant mouse coords to place the tooltip at.

Peter-H-Etteplan avatar Feb 08 '22 09:02 Peter-H-Etteplan

This worked for me while synchronizing multiple charts: chart.tooltip.setActiveElements([], { x: 0, y: 0 });

From the docs here: https://www.chartjs.org/docs/latest/api/interfaces/TooltipModel.html#setactiveelements Sample here (look at the tooltip tab): https://www.chartjs.org/docs/latest/samples/advanced/programmatic-events.html

thejoecode avatar Sep 20 '22 16:09 thejoecode

Calling chart.update() [to force the tooltip.enable = true to take effect] in onPanComplete() / onZoomComplete() can also cause temporary drawing issues on the edges of the chart during transition, like zooming (due to performance?)

Better to set a flag and then call chart.update() during onHover() and reset flag.

estanglerbm avatar Apr 07 '24 23:04 estanglerbm