CODEWITHSUNDEEP
vega
kris
kris

Reputation: 23592

Multi-value tooltip in Vega

I'm using Vega (not vega-lite, since I'm using treemap which isn't supported in vega-lite).

In the example in the link above I've added a tooltip on hover, so you can see what each small box is:

    ...
    {
      "type": "rect",
      "from": {"data": "leaves"},
      "encode": {
        ...
        "hover": {
          "tooltip": {"field": "name"},  // What I added
          "fill": {"value": "red"}
        }
      }
    },
    ...

This works great for displaying the name in the tooltip, but I'd like to display multiple fields, which I can't figure out the syntax for. I've tried stuff like:

    tooltip: [{"field": "name"}, {"field": "depth"}]  // Doesn't work
    tooltip: {"field": ["name", "depth"]}  // Also doesn't work

A formatted string would also be fine, but I also can't figure out how formatting would work, either:

    tooltip: "datum['name'] is depth datum['depth']"  // Doesn't work

The Marks -> Rect documentation somewhat unhelpfully defines the type for "tooltip" as "Any" (and I'm not even sure if that documentation applies, since my tooltip is actually within the encode -> hover subobject of the rect.

Is there a way to display multiple tooltip values?

Upvotes: 1

Views: 1650

Answers (2)

Мирослава мрочко
Мирослава мрочко

Reputation: 1

I did it like this:

        "tooltip": 
          {
            "signal": "{title:  datum.name , 'Average temperature': datum.tooltip1 + ' °F', 'Temperature': datum.tooltip2 + ' °F'}"      }

Upvotes: 0

Dedidod
Dedidod

Reputation: 221

Yes there is! Again this is one of those things that is hard to find any documentation on. But here is an example of how I achieve this.

....

encode: {
  enter: {
    tooltip: {
      signal: "{'Title1': datum.field1,
                'Title2': datum.field2,
                'Title3': datum.field3}"
    }

...

You were so close as well! For some reason you just have to define this as one big signal, and then you can access the current datum.

I understand this is without quotation marks (I use the Kibana editor), so you might have to play around with the syntax a bit.

Upvotes: 4

Related Questions