Format timestamp as a date in the tooltip in Vega-lite

Question

I have this chart that takes data from a CSV, pivots it by one of the column and displays several timeseries with lines. Also makes a tooltip taking the names from the pivot column automatically.

The only problem is that the date/time appears as a timestamp. Is there a way to format it to look nicer, like an actual date + time, the same way it appears in the X axis?

I know I could specify all the values for the tooltip doing something like

        "tooltip": [
    {
        "field": "date",
        "type": "temporal",
        "title": "date",
        "timeUnit": "utcyearmonthdatehoursminutes"
    },
    {...}
]

But I want to be able to keep using "mark": {"type": "rule", "tooltip": {"content": "data"}}, to be able to get the tooltip fields dynamically, and if I add the code above only the date appears in the tooltip.

Here's the full code:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/stocks.csv"},
  "width": 400,
  "height": 300,
  "encoding": {"x": {"field": "date", "type": "temporal"}},
  "layer": [
    {
      "encoding": {
        "color": {"field": "symbol", "type": "nominal"},
        "y": {"field": "price", "type": "quantitative"}
      },
      "layer": [
        {"mark": "line"},
        {"transform": [{"filter": {"param": "hover", "empty": false}}], "mark": "point"}
      ]
    },
    {
      "transform": [{"pivot": "symbol", "value": "price", "groupby": ["date"]}],
      "mark": {"type": "rule", "tooltip": {"content": "data"}},
      "encoding": {
        "opacity": {
          "condition": {"value": 0.3, "param": "hover", "empty": false},
          "value": 0
        }
      },
      "params": [{
        "name": "hover",
        "select": {
          "type": "point",
          "fields": ["date"],
          "nearest": true,
          "on": "mouseover",
          "clear": "mouseout"
        }
      }]
    }
  ]
}

Answer 1

You can format the date field in calculated transform and assign new field, which will then be displayed in your tooltip. Just add the below transform code or check the editor . For more format or date expressions refer, https://vega.github.io/vega/docs/expressions

"transform": [
        {"pivot": "symbol", "value": "price", "groupby": ["date"]},
        {"calculate": "datetime(datum.date)", "as": "convertedDate"},
        {
          "calculate": "utcFormat(datum.date,'%B %d, %Y')",
          "as": "converted as string"
        }
      ],

If you want to update the existing date field, then just provide the date field in as config as done below:

 {"calculate": "datetime(datum.date)", "as": "date"},

Answer 2

I had the same issue and I resolved it in the following way:

• Deleted "tooltip" from "mark" and put it into "encoding":

  "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "width": "container", "data": { "values": {{dataViz2 | safe }} },
  "mark": { "type":"line",
  "point": {"filled": false,"fill": "white"} },
  "encoding": { "x": {"field": "date", "type": "temporal", "axis": {"format": "%b %d "}}, "y": {"field": "total", "type": "quantitative"}, "tooltip": [ {"field": "date", "type": "temporal", "format": "%b %d %Y"}, {"field": "total", "type": "quantitative", "format": ",d" } ]
  }