Vega-lite: Tooltips in stacked Vega-Lite chart disappear when using interval selections

[fuglede]

This is taken from this StackOverflow question.

The Altair example gallery contains a nice example of how to use interval selections to create two plots where one allows you to define the scale of the other. I have been trying to add tooltips to both parts of the stacked chart by defining the tooltips as part of the base:

import altair as alt
from vega_datasets import data

source = data.sp500.url

brush = alt.selection(type='interval', encodings=['x'])

base = alt.Chart(source).mark_area().encode(
    x = 'date:T',
    y = 'price:Q',
    tooltip = 'price:Q'
).properties(
    width=600,
    height=200
)

upper = base

lower = base.properties(
    height=60
).add_selection(brush)

upper & lower

Doing so, the tooltips work as expected on lower but not at all on upper.

If, however, I remove the .add_selection(brush) from lower, the tooltips also work on upper (which was unchanged), but that of course defeats the purpose of the example. I can also make the tooltips work on upper by marking it as interactive, but again, that ruins what's nice about the example. Changing the definition of upper to upper = base.encode(tooltip='price:Q') does nothing.

@jakevdp provides a workaround in his answer; adding a dummy selection to upper.

The JSON specification of the chart above (without the workaround) is the following:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.0.2.json",
  "config": {
    "view": {
      "continuousHeight": 300,
      "continuousWidth": 400
    }
  },
  "data": {
    "url": "https://vega.github.io/vega-datasets/data/sp500.csv"
  },
  "vconcat": [
    {
      "encoding": {
        "tooltip": {
          "field": "price",
          "type": "quantitative"
        },
        "x": {
          "field": "date",
          "type": "temporal"
        },
        "y": {
          "field": "price",
          "type": "quantitative"
        }
      },
      "height": 200,
      "mark": "area",
      "width": 600
    },
    {
      "encoding": {
        "tooltip": {
          "field": "price",
          "type": "quantitative"
        },
        "x": {
          "field": "date",
          "type": "temporal"
        },
        "y": {
          "field": "price",
          "type": "quantitative"
        }
      },
      "height": 60,
      "mark": "area",
      "selection": {
        "selector001": {
          "encodings": [
            "x"
          ],
          "type": "interval"
        }
      },
      "width": 600
    }
  ]
}

[sangsteroni]

A couple of related observations:

1. The workaround mentioned - i.e. adding dummy selections to the other charts aside from the one with the real selection - does not work with box plots. Probably because of vega-lite.min.js:1 WARN Selection not supported for boxplot yet.
2. The absence of the dummy selection also affects the working of the "href" directive in the case of, say, a "text" mark. The href works again when a dummy selection is introduced.

[arvind]

Hi @fuglede and @sangsteroni, thanks for filing this issue. As of Vega 5.17.1, Vega-Lite 4.17.0, I don't seem to be able to reproduce the issue — I wonder if we fixed it along the way. To make sure I'm understanding the issue correctly, with the JSON spec posted in the first comment, I see tooltips in both the top and bottom views. However, I do not see tooltips over the region a brush covers. Unfortunately, this is due to a limitation in our underlying Vega library (https://github.com/vega/vega-lite/issues/3154, https://github.com/vega/vega/issues/1494).

https://user-images.githubusercontent.com/42262/103945242-e2b18000-5102-11eb-8d8f-fe9e85bbbbca.mp4

Please re-open this issue if you still experience this issue.

[fuglede]

@arvind I can verify that tooltips show up on the upper plot with Vega 5.17.1/Vega 4.17.0, so that's excellent. I do still run into the issue mentioned in the comments for the SO answer: Tooltips do not show up when hovering over the actual selection in the lower plot. As stated, that's really a different issue from this one; should we open a different issue for that?

[arvind]

Thanks for corroborating, @fuglede. Unfortunately, for that latter issue you mention, it occurs due to a known limitation in our underlying Vega library and is captured by these two issues: #3154, vega/vega#1494.