Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Echarts.js: How to programmatically activate brush selection

I have a chart of financial data, e.g. prices of a stock, using the great echarts.js library.

I wish the user will be able to select a portion of this chart with the mouse, by clicking and dragging. The selected range isn't needed to zoom the chart, but only tell the user some information, e.g. max price, minimum price in the selection.

I think I can accomplish this using brush and brushType:'lineX'.

My concern is now regarding the toolbox. I don't want it. I can hide it, by setting show:false, but without toolbox buttons I cannot select the 'lineX' brush.

Is it possible to activate programmatically the 'lineX' brush? I wish that the chart will always have this brush active, and that the user can reset the brush selected range, just by clicking. Without deactivating the 'lineX' selection. Is this possible?

like image 889
Marco Pagliaricci Avatar asked Oct 14 '25 16:10

Marco Pagliaricci


1 Answers

Try below:

myChart.dispatchAction({
    type: 'takeGlobalCursor',
    key: 'brush',
    brushOption: {
        brushType: 'lineX',
        brushMode: 'single'
    }
}); 
like image 187
Robin Shen Avatar answered Oct 17 '25 06:10

Robin Shen



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!