Double click

[nergiszaim]

Description

I have multiple groups in a stack chart, and would like to see one by one. deselecting all the groups to see only one is cumbersome. Is there a double click option like in Plotly to show one series right away?

Steps to check or reproduce

[netil]

Hi @nergiszaim, can you provide link demo to check?

[nergiszaim]

Sure, https://plotly.com/r/bar-charts/

Here if you double click to any legend, it will just filter that group on the chart.

[netil]

There's no option doing that, but you can implement easily.
I made an example that you can take as a reference. Double clicking the legend, will hide all except the selected one.

• https://jsfiddle.net/netil/jynfphz0/

[nergiszaim]

That is awesome! Do you happen to have this example as an R code?

[kmatarese]

It looks like c3 had this ability through a poorly documented alt-click option (commit here). It seems your library has inherited that, because I can use alt-click to select/focus a single series. Works on the examples too: https://naver.github.io/billboard.js/demo/#Chart.AreaChart.

What would be a nice addition is if you double click the item again, or perhaps also if all options have been deselected, it does the reset you put in your example above automatically. I'm also used to this being possible via double click, but alt-click is fine now that I know about it. For now I'll use the custom template approach as needed.

[netil]

Hi @kmatarese, thanks for sharing this.

There're 2 possible actions can be taken from this:

• alt+click Add to API doc describing this feature
• dblclick: Considering to implement

[kmatarese]

Seeing as alt+click wasn't really documented in C3 (I found it in a random github issue comment), if your plan is to implement double-click behavior I think it makes sense to just document that once it's ready. IMO it's a better/more standard UX anyway.

At the risk of overloading this particular issue, there are a handful of related legend improvements I would find useful. I'll mention them in case they are easy while you are implementing double-click. To add some context, in my application I can easily run into cases where there are hundreds of series being charted at once. The legend UI/UX doesn't scale that well to this scenario, though I realize it's my use case that is unusual, not the legend itself. For now I just cut the legend out over a certain threshold.

• Ability to disable the hover behavior. I found overriding onover and onout to be empty functions prevented hover but broke other legend click logic. A simple flag for this might be useful.
• When hover is enabled, and you click a legend item to disable it, the data is removed from the graph but the legend item remains highlighted because of the hover functionality (until you move the mouse away). I think as soon as you click to disable a data series in the legend it should become greyed out, regardless of still hovering over it.
• If the last item is deselected, all items should reset and be selected.
• The equally option doesn't seem to leave enough space if your data series names are longer and you have a lot of legend items. Being able to use this would help a lot when your legend item count grows, looks a lot neater.
• A simple idea for when there would be a lot of legend items: making the legend area have a max height and have it scrollable when it overflows the Y direction
• A less simple idea: having a "page" concept, where you could page through your legend and it would change what shows up on the graph (page size should be configurable). Would only kick in if you had a lot of series to draw, but has the added benefit of allowing scenarios where you have a lot of data/series which would otherwise really bog down the UI. This could be built externally too though.

Thanks for your help and for all of your work on this. If you'd like me to open separate issues for any of these let me know.

[netil]

I loved to. Please open each issues as separate one, where will help manage and implement.

Thanks for your help and for all of your work on this. If you'd like me to open separate issues for any of these let me know.

[kmatarese]

* Ability to disable the hover behavior. I found overriding `onover` and `onout` to be empty functions prevented hover but broke other legend click logic. A simple flag for this might be useful.

#1598

* When hover is enabled, and you click a legend item to disable it, the data is removed from the graph but the legend item remains highlighted because of the hover functionality (until you move the mouse away). I think as soon as you click to disable a data series in the legend it should become greyed out, regardless of still hovering over it.

#1599

* If the last item is deselected, all items should reset and be selected.

I'm going to ignore this one as it's something that could be handled with your double-click implementation. If you double click an item it should show just that series. If you double click it again it should reset the chart (show all). Alternatively having an optional "reset" control in the legend could be useful. Again this becomes more of an issue when you chart many series and you don't want to have to click all of the legend items to reset.

* The `equally` option doesn't seem to leave enough space if your data series names are longer and you have a lot of legend items. Being able to use this would help a lot when your legend item count grows, looks a lot neater.

#1600

* A simple idea for when there would be a lot of legend items: making the legend area have a max height and have it scrollable when it overflows the Y direction

* A less simple idea: having a "page" concept, where you could page through your legend and it would change what shows up on the graph (page size should be configurable). Would only kick in if you had a lot of series to draw, but has the added benefit of allowing scenarios where you have a lot of data/series which would otherwise really bog down the UI. This could be built externally too though.

Combined both of these ideas into one issue: #1601