Intelligent Pointer Snapping

Some interactive elements may be relatively small in charts, so sometimes it is difficult for users to click and do other operations accurately, especially on the mobile. Therefore, in Apache ECharts^TM 5.4.0, we introduced the concept of "intelligent pointer snapping".

Starting from this version, by default, ECharts enables pointer snapping for mobile charts and disables it for non-mobile charts.

If it needs to be enabled for all platforms, it can be achieved by setting opt.useCoarsePointer to true in init; set to false is turned off for all platforms.

Snapping Algorithm

When a mouse or touch event occurs, ECharts will determine whether it is intersecting with an interactive element based on the position of the mouse or touch. If it is, the element is the object to be interacted with, which is the same logic before this optimization. If not, find an element that is closest to the mouse or touch position within a certain range.

The default range is 44px (see W3C standard), developers can set this value through opt.pointerSize when init.

More specifically, ECharts will loop through different angles and different radii (within opt.pointerSize) around the mouse or touch position until it finds an element that intersects it. If found, the element is considered to be the interactive object.

That is, if an element is within the opt.pointerSize radius of the mouse or touch position, the closest intersected element is considered the interactive object.

Performance

As for the implementation, we first judge the intersection between the mouse or touch position and the AABB bounding box of all interactive elements, so as to quickly eliminate most of the elements that is not intersecting. Then, we perform an accurate path intersection judgment on the remaining elements. Therefore, from the perspective of user experience, there is hardly any perceivable performance loss.

For chart series with large-scale data (that is, bar charts, scatter charts, etc. with large: true enabled), the snapping will not be enabled.