Add an event to tell when an axis pointer has changed on a line chart
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### What problem does this feature solve?
In GitLab UI, we are using a line chart with a padding and a custom tooltip instead of the one built into ECharts:
https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-sparkline-chart--default
Because there's no event that tells us when the axis pointer has changed, we are doing the following as a workaround in order to show our custom tooltip:
1. Show the custom tooltip on `mouseenter` when the mouse enters the EChart.
2. Hide the custom tooltip on `mouseleave` when the mouse leaves the EChart. We are inferring here that when the mouse leaves the EChart, the axis pointer is hidden as well.
3. Use `xAxis.axisPointer.label.formatter` to detect when the axis pointer has changed in order to update the custom tooltip contents. Because the formatter is called each time the axis pointer changes, we are using it to infer that the axis pointer has changed and update our custom tooltip, even though this is not the function's intended purpose. However, this formatter function is only called when the axis pointer is first displayed or changed, but not when it's removed, so we still need to use the above `mouseleave` event to hide our tooltip.
Using these workarounds leads to a problem which I've documented in this GitLab UI merge request (with videos showing the behavior):
https://gitlab.com/gitlab-org/gitlab-ui/merge_requests/959
In short, because the chart uses padding, there's a small gap between when the `mouseenter` fires because it's entered the chart, but it's not close enough to the line for the axis pointer to display. This is causing an empty tooltip to display, as well as other issues related to tooltip positioning (please see the videos in the GitLab UI MR). In the MR, we fix the issue by showing the tooltip in `xAxis.axisPointer.label.formatter` instead of `mouseenter` on the EChart, but this is also a workaround and relies on inference rather than directly being able to tell when the axis pointer is shown/changed/hidden. Internally in ECharts, it uses an `updateAxisPointer` event:
https://github.com/apache/incubator-echarts/blob/fcf80fef1727101947b49a5f722fd4f494f6212b/src/component/axisPointer.js#L59-L63
But this event is undocumented and will fire on `mousemove`, which can cause performance issues if we hook into it because it will fire for every mouse movement, even if the axis pointer did not change.
We'd like to propose adding an `axisPointerChange` event that will directly inform us when the axis pointer has changed so that we don't have to use workarounds to infer it.
### What does the proposed API look like?
```
chartInstance.on('axisPointerChange', (e) => {
if (e.data) {
showCustomTooltip(e.data);
} else {
hideCustomTooltip();
}
})
```
where `e == { data: [xVal, yVal] }` when the axis pointer is visible or has changed to another point, and `e == { data: undefined }` when the axis pointer is no longer visible. The data format is flexible, the important thing is having an event that will directly tell us the state of the axis pointer.
Contributor guide
Assessment
This issue has not been assessed yet.