How to show selection / calculated data in vega-lite tooltip?

Question

I'm trying to calculate price difference of a selection in a chart provided in Vega Editor.

The goal is to display a price difference in tooltip calculated as end value of selection - start value of selection. I calculate it as price_diff in my code, however the tooltip is displaying NaN, instead of the actual value.

What do I do wrong? Is it possible to set tooltip fields based on selection? I.e. display hover price when not selected and price difference when range is selected?

Thank you for your help

Answer 1

Try this.

Editor

One issue with your original code is that the selection doesn't snap to the nearest point. If you want to solve that too, you can read more about how to do so here.

{
  "width": "container",
  "data": {
    "values": [
      {"date": "2021-04-05T00:00", "price": 163.45},
      {"date": "2021-04-06T00:00", "price": 161.75},
      {"date": "2021-04-07T00:00", "price": 159.42},
      {"date": "2021-04-08T00:00", "price": 162.22},
      {"date": "2021-04-09T00:00", "price": 161.175},
      {"date": "2021-04-12T00:00", "price": 159.77},
      {"date": "2021-04-13T00:00", "price": 159.14},
      {"date": "2021-04-14T00:00", "price": 158.495},
      {"date": "2021-04-15T00:00", "price": 160.775},
      {"date": "2021-04-16T00:00", "price": 159.56},
      {"date": "2021-04-19T00:00", "price": 156.965},
      {"date": "2021-04-20T00:00", "price": 154.525},
      {"date": "2021-04-21T00:00", "price": 158.235},
      {"date": "2021-04-22T00:00", "price": 155.33},
      {"date": "2021-04-23T00:00", "price": 158.985},
      {"date": "2021-04-26T00:00", "price": 160.655},
      {"date": "2021-04-27T00:00", "price": 159.51},
      {"date": "2021-04-28T00:00", "price": 156.11},
      {"date": "2021-04-29T00:00", "price": 158.03},
      {"date": "2021-04-30T00:00", "price": 153.155},
      {"date": "2021-05-03T00:00", "price": 151.3},
      {"date": "2021-05-04T00:00", "price": 151.955}
    ]
  },
  "encoding": {
    "x": {
      "field": "date",
      "type": "ordinal",
      "timeUnit": "yearmonthdatehoursminutes",
      "title": "",
      "scale": {"paddingInner": 1, "paddingOuter": 0}
    },
    "y": {
      "field": "price",
      "type": "quantitative",
      "title": "",
      "axis": {"formatType": "number"}
    }
  },
  "layer": [
    {
      "mark": {
        "type": "area",
        "line": {"color": "red"},
        "color": {
          "x1": 1,
          "y1": 1,
          "x2": 1,
          "y2": 0,
          "gradient": "linear",
          "stops": [
            {"offset": 0, "color": "white"},
            {"offset": 1, "color": "red"}
          ]
        }
      }
    },
    {
      "mark": "point",
      "encoding": {
        "opacity": {
          "condition": {"value": 0.8, "param": "hover", "empty": false},
          "value": 0
        }
      }
    },
    {
      "mark": "rule",
      "transform": [
        {"filter": {"param": "diff"}},
        {
          "window": [
            {"op": "first_value", "field": "price", "as": "first_price"},
            {"op": "last_value", "field": "price", "as": "last_price"}
          ]
        },
        {
          "calculate": "datum.last_price - datum.first_price",
          "as": "price_diff"
        }
      ],
      "encoding": {
        "opacity": {
          "condition": {"value": 0.2, "param": "hover", "empty": false},
          "value": 0
        },
        "tooltip": [
          {
            "field": "date",
            "type": "nominal",
            "formatType": "time",
            "title": "Date"
          },
          {
            "field": "price",
            "type": "quantitative",
            "format": "$.2f",
            "title": "Price"
          },
          {
            "field": "price_diff",
            "type": "quantitative",
            "title": "Price difference"
          }
        ]
      },
      "params": [
        {
          "name": "hover",
          "select": {
            "type": "point",
            "fields": ["price"],
            "nearest": true,
            "on": "mouseover",
            "clear": "mouseout",
            "encodings": ["x"]
          }
        },
        {
          "name": "diff",
          "select": {"type": "interval", "encodings": ["x"]}
        }
      ]
    }
  ]
}