Tooltip Issue: Tooltip displays the not selected data

Question

I've been working with Vega-Lite to make not stacked histogram having tooltips with Legend Binding.

• Tooltip works well when all simbol legends are selected.
  • Works well image
• However, I've encountered an issue that, when some simbol legends are selected, tooltip display upper unselected data.
  • Issue image
• I expect that tooltip displays the data over mouse.
  • Goal Image

You can view it here: Vega Editor , and click S1 in right legend, and move mouse on x == 1 on right histogram

Any suggestions on how to rectify this or if there is an alternative workaround available would be greatly appreciated.

Thank you for your time and assistance.

Answer 1

It looks like the interaction is still picking up the underlying object despite the opacity. One option is to "filter" the data based on the interactive legend: {"filter": "isDefined(legend_selector.legend) == false ? true : indexof(legend_selector.legend, datum.legend) >= 0"}. Once you've applied this filter, a key part of ensuring it correctly is manually setting the legend scale so that the values that are filtered out still appear in the legend: "scale": {"domain": ["S1", "S2"]}. You can then simplify your "opacity" encoding to just set the value (without the conditional formatting). A working example is available in the online editor here.