Is there a way to have a "dynamic" tooltip in deneb?

Question

I have the following chart which pulls data from a file. I then add a filter to the chart to determine which tickers to use and my legend updates accordingly, however, I'm wondering if I can somehow also have my tooltip automatically update, such that it displays the value of each line, without hardcoding?

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "params": [{"name": "dt", "expr": "hover['Date']"}],
  "data": {"name": "dataset"},
  "title": {
    "text": {"expr": "data('dataset')[0]['title']"},
    "anchor": "start",
    "subtitle": {"expr": "data('dataset')[0]['title']"}
  },
  "encoding": {"x": {"field": "Date", "type": "temporal"}},
  "layer": [
    {
      "layer": [
        {
          "mark": "line",
          "encoding": {
            "y": {"field": "Sum of Price", "type": "quantitative", "title": "Price"},
            "color": {"field": "Ticker", "type": "nominal", "scale": {"range": {"field": "Colour"}}}
          }
        },
        {
          "params": [
            {
              "name": "hover",
              "select": {
                "type": "point",
                "fields": ["Date"],
                "nearest": true,
                "on": "mouseover",
                "clear": "mouseout"
              }
            }
          ],
          "mark": {"type": "rule", "color": "gray", "y": 0, "y2": {"expr": "height"}},
          "encoding": {
            "opacity": {
              "condition": {
                "test": {"param": "hover", "empty": false},
                "value": 0.5
              },
              "value": 0
            },
            "tooltip": [
              {"field": "Date", "type": "temporal"},
              {"field": "Sum of Price", "type": "quantitative"}
            ]
          }
        }
      ]
    }
  ],
  "config": {
    "view": {"stroke": "transparent"},
    "axis": {"domain": false, "tickColor": "lightGray"},
    "style": {"cell": {"stroke": "transparent"}}
  }
}

Edit my pbix file is here

Thank you.

Do you want a Vega tooltip or PBI tooltip? Can you share a .pbix or spec with sample data in it? — Davide Bacci, Aug 14 '23 at 11:28
@DavideBacci [here](https://file.io/LIACOZgsX4CT) is my pbix. Ideally I want it to be a vega tooltip (ie show values on hover) as I haev multuple plots that are distinguished by filters so the more dynamic the better. — Tom Callan, Aug 14 '23 at 13:05

score 2 · Accepted Answer · answered Aug 14 '23 at 14:07

This is not easy to do but the following works:

Create a measure as follows and add it to the field well of deneb:

Prices = 
VAR t = CALCULATETABLE( SUMMARIZE(combined,combined[Ticker], combined[Price]), ALLSELECTED(), VALUES(combined[Date]))
RETURN

 IF(NOT(ISBLANK(SUM(combined[Price]))),
    CONCATENATEX(t, combined[Ticker] & " : " & combined[Price],  UNICHAR(10))
 )

Here is the spec:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "dataset"},
  "title": {
    "text": {
      "expr": "data('dataset')[0]['title']"
    },
    "anchor": "start",
    "subtitle": {
      "expr": "data('dataset')[0]['title']"
    }
  },
  "encoding": {
    "x": {
      "field": "Date",
      "type": "temporal"
    }
  },
  "layer": [
    {
      "mark": {"type": "line"},
      "encoding": {
        "y": {
          "field": "Sum of Price",
          "type": "quantitative",
          "title": "Price"
        },
        "color": {
          "field": "Ticker",
          "type": "nominal",
          "scale": {
            "range": {"field": "Colour"}
          }
        }
      }
    },
    {
      "params": [
        {
          "name": "hover",
          "select": {
            "type": "point",
            "fields": ["Date"],
            "nearest": true,
            "on": "mouseover",
            "clear": "mouseout"
          }
        }
      ],
      "mark": {
        "type": "rule",
        "color": "gray",
        "y": 0,
        "y2": {"expr": "height"}
      },
      "encoding": {
        "tooltip": [
          {
            "field": "Date",
            "type": "temporal"
          },
           {
            "field": "Prices",
            "type": "nominal"
          }
        ],
        "opacity": {
          "condition": {
            "test": {
              "param": "hover",
              "empty": false
            },
            "value": 0.5
          },
          "value": 0
        }
      }
    }
  ],
  "config": {
    "view": {"stroke": "transparent"},
    "axis": {
      "domain": false,
      "tickColor": "lightGray"
    },
    "style": {
      "cell": {"stroke": "transparent"}
    }
  }
}

Is there a way to have a "dynamic" tooltip in deneb?

1 Answers1