Showing both x and y value in multi-line tooltip

Hello, thanks for your work on this awesome visualization library.

I am looking to adapt the multi-line tooltip example (https://altair-viz.github.io/gallery/multiline_tooltip.html) to plot molecular spectra. I would like the tooltip to also show the value of the x axis. I’ve added another text mark:

x_text = spectrum.mark_text(align="right", dx=-5, dy=-25).encode(
      text=alt.condition(nearest, "x:Q", alt.value(" "), format="3.4f")
   )

but was wondering: a. Is there a better way to do this? b. How can I have the displayed x-value always appear at the bottom (or top) of the chart without fiddling with dx and dy?

[jakevdp]

Yes, I’ve been meaning to replace that example because it’s overly verbose and confusing. With the pivot transform in Altair 4+, you can do something a bit more cleanly:

import altair as alt
from vega_datasets import data

source = data.stocks.url

hover = alt.selection_single(
    fields=["date"],
    nearest=True,
    on="mouseover",
    empty="none",
    clear="mouseout"
)

lines = alt.Chart(source).mark_line().encode(
    x='date:T',
    y='price:Q',
    color='symbol:N',
)

points = lines.transform_filter(hover).mark_circle()

tooltips = alt.Chart(source).transform_pivot(
    "symbol", "price", groupby=["date"]
).mark_rule().encode(
    x='date:T',
    opacity=alt.condition(hover, alt.value(0.3), alt.value(0)),
    tooltip=["AAPL:Q", "AMZN:Q", "GOOG:Q", "IBM:Q", "MSFT:Q"]
).add_selection(hover)

lines + points + tooltips

This makes it trivial to add another tooltip field: just add an encoding to the list.

[jakevdp]

You’re pivoting x while grouping by x, which constructs an NxN data representation. Here N is 5000, so you’re telling the browser to construct a data object with 25,000,000 elements.

That is… not recommended.

There’s no reason to pivot a value while grouping by that same value. And if all you want is to display a tooltip with x and y, there’s no need to pivot at all. Remove the pivot transform and it should work.