Skip to content

fix: Fix empty tooltip on sparklines

Daniel Tian requested to merge 526-charts-render-an-empty-tooltip into master

This MR fixes #526 (closed). The chart has a gap between it and the actual data points:

Screen_Shot_2019-12-12_at_7.30.53_PM

Previously, the code was listening to mouseenter on the div in order to show the tooltip, but it's possible to hover over the div without getting close enough to a data point, leading to an empty tooltip:

Kapture_2019-12-12_at_19.39.46

This causes other issues issues as well, such as the tooltip showing for a data point that's nowhere close to the cursor, which if done fast enough makes the tooltip look like it's jumping from its old location to the new location:

Kapture_2019-12-12_at_19.44.59

As well as continuing to display the tooltip even though the axis pointer (the bubble that highlights the closest data point) is no longer present:

Kapture_2019-12-12_at_19.49.05

NOTE: This MR has been updated and the below no longer applies. Leaving it here for reference because it might be useful info for a GitHub issue I have open with ECharts.

The fix ties into the undocumented updateAxisPointer event in echarts:

https://github.com/apache/incubator-echarts/blob/fcf80fef1727101947b49a5f722fd4f494f6212b/src/component/axisPointer.js#L59-L63

Which as far as I can tell, is the same way the echart itself determines whether it should show the axis pointer or not:

https://github.com/apache/incubator-echarts/blob/fd064123626c97b36cbd6da1b5fc73385c280abd/src/component/axisPointer/axisTrigger.js#L88

Because there's no onAxisPointerShown/onAxisPointerHide event, and because we need to differentiate between when an axis point is visible vs just mousing over the chart, I decided to implement against the updateAxisPointer event despite it not being documented. It will fire for every mousemove over the chart so it's not exactly performant, but unfortunately I couldn't find another way of doing it.

Edited by Daniel Tian

Merge request reports