c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.34k stars 1.39k forks source link

Point selection by dragging and unselect by clicking does not work in one condition #2793

Open PT10 opened 4 years ago

PT10 commented 4 years ago

There is a definite issue with the data point selection support. My data series has some selectable and some non selectable data points. I select the data points with a mouse drag to select few points. Now if I try to unselect them by clicking on them then they don't get unselected. However if I stick to the same method for unselect i.e. to drag the mouse again then the points get unselected.

Also note that the behaviour is observed only when the data series has a combination of selectable and non selected points. If the entire series is selectable then the issue is not observed.

On deeper analysis I found out that actually the unselect event is getting triggered and the point is no more in the selected list but the circle which surrounds the point stays there. Hence it is an issue with the select circle.

Here is the Stackblitz demo and the code. #c3-chart-error

Here all points above 5 are selectable. Please follow the below steps to reproduce the issue.

  1. Mouse drag/drop on points above value 5 to select them. (one or more)
  2. Click on the selected point. The circle doesn't go away.

Thanks