[Bug] Brush unable to detect exact selected value in Funnel, Radar & Gauge

[AAravind27]

Version

5.5.0

Link to Minimal Reproduction

Provided in steps to reproduce

Steps to Reproduce

1. Open an .

2. Open any example of said charts ( Funnel / Gauge / Radar ) in a new tab.

3. Paste Brush option brush: { toolbox: ['rect', 'keep', 'clear'] }, inside the options object.

4. Paste the function ( function reference: shows brush selection on bar ) for brush Selection myChart.on('brushSelected', function (params) { var brushed = []; console.log(params); var brushComponent = params.batch[0]; for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) { var rawIndices = brushComponent.selected[sIdx].dataIndex; brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', ')); } myChart.setOption({ title: { backgroundColor: '#333', text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'), bottom: 0, right: '10%', width: 100, textStyle: { fontSize: 12, color: '#fff' } } }); }); after the options object.

5. Select rectangular selection from toolbox and create rectangular selection on chart.

6. Title on chart , which is used to display the selection, displays

7. In the browser console, as we go through the params' objects' properties, we find that dataIndex is empty as well as other properties also don't seem to help detect exact selected value.

Current Behavior

doesn't detect what is clicked on.

Expected Behavior

Should detect what was clicked ( either by dataIndex or via some other property) or create separate examples for all chart types or add a note if isn't implemented.

Environment

- OS: Windows
- Browser: Chrome
- Framework: Vanilla JS

Any additional comments?

No response

[helgasoft]

Wonder about your use case... Typically brush is not used on these types of charts. Demo on how to funnel select with selectchanged.

[AAravind27]

Use case: When there are a lot of values, say >20, in legend and user wants a subset of them, then instead of toggling the items in legend, user can make a rectangular selection of desired values, which will also update the visibility of items in the legend.

Typically brush is not used on these types of charts.

@helgasoft , Please elaborate. Are you saying this regarding echarts? what do you mean by these "types of charts". Please include references, if any.

Demo on how to funnel select with selectchanged.

Thankyou!! This is great!!! didn't know 2 events can be used together. It solves part of my issue. Using the same example, say I click on the third and fourth item in the funnel, is it possible to make others "visually disabled" ( or changing there color to grey , but still click-able ) without using a for-loop through the series-data and adjusting opacity of elements that are not selected.

[AAravind27]

@helgasoft , Please elaborate. Are you saying this regarding echarts? what do you mean by these "types of charts". Please include references, if any.

@helgasoft, please respond.

[helgasoft]

what do you mean by these "types of charts".

your title says "Funnel, Radar & Gauge"

[AAravind27]

Thankyou. Btw, I am trying to do something similar for legends. i.e. click on an item in legend and only that item is selected and if clicked on another item in legend then current and previous are selected. Items can be deselected by clicking on them. For this, I tried legendselectchanged and legendToggleSelect,

• legendselectchanged with legendToggleSelect , stack overflows.
• With legendselectchanged, the selected array I receive already undergoes the corresponding echarts action. Is it possible to receive the array without echarts' changes?

[AAravind27]

For radar, Is it possible to fetch info of the value that we hovered upon, instead of the entire array?

[helgasoft]

fetch info of the value that we hovered upon, instead of the entire array?

ah, would be nice, wouldn't it? see #19182 for related feature request which covers even more enhancements

[AAravind27]

It would be. Thankyou for resolving my queries.