DEV Community

Darkside
Darkside

Posted on

How to clear the box selection at the end of the onbrushEnd event when using vchart?

Question title

How to clear the box selection at the end of the onbrushEnd event when using vchart?

Problem description

I am using the @visactor/vchart chart library for chart development and encountered a problem. I need to clear the brush box at the end of the onbrushEnd event, but currently I have not found a suitable API to implement this requirement.

Solution

Currently, there is no API that directly corresponds to this requirement, but there is a relatively special implementation method that can solve this problem. The specific code is as follows:

cs.on('brushEnd', (params) => {
cs.getChart()?.getAllComponents().forEach(c => {
if(c.name === 'brush') {
c?._brushComponents?.forEach(c => c._container.incrementalClearChild())
}
})
})
Enter fullscreen mode Exit fullscreen mode

The above solution is to retrieve all components and traverse them after triggering the'brushEnd 'event. If a component is named'brush', it will be cleared.

Results show

After the code runs, you can clear the box selection after the onbrushEnd event ends.
Online demo: https://codesandbox.io/p/sandbox/grouped-bar-chart-shows-all-the-group-labels-forked-2t4jf7

Related Documents

Top comments (0)