Search code examples
tooltipvisualizationvega-litevega

Specify the order of items in a vega-lite tooltip?

I have a vega-lite line chart with multiple series split by color. Here's a link to the chart in the vega editor.

The spec for the tooltip on this chart has the "Hour" field at the top:

"tooltip": [
  {"field": "day", "title": "Hour", "type": "temporal"},
  {"format": "d", "field": "200", "type": "quantitative"},
  {"format": "d", "field": "302", "type": "quantitative"},
  {"format": "d", "field": "301", "type": "quantitative"},
  {"format": "d", "field": "400", "type": "quantitative"},
  {"format": "d", "field": "499", "type": "quantitative"},
  {"format": "d", "field": "504", "type": "quantitative"}
]

but when it renders, it shows up at the bottom: enter image description here

What can I do to make the "Hour" entry show up at the top of the tooltip?

Note that I can't write code. This needs to be specifiable via JSON only.

Solution

  • Give them all non-numeric titles as it seems numeric items are sorted before non-numeric. Adding a space before the numeric ones takes care of it:

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "name": "vega-435d0103-789c-4951-a23b-7126f572309f",
  "layer": [
    {
      "layer": [
        {
          "encoding": {
            "y": {"axis": {"format": "d", "orient": "left"}, "field": "value"}
          },
          "mark": {"point": false, "interpolate": "linear", "type": "line"}
        }
      ],
      "encoding": {
        "color": {
          "sort": ["200", "302", "301", "400", "499", "504"],
          "field": "key",
          "type": "nominal"
        }
      }
    },
    {
      "encoding": {
        "tooltip": [
          {"field": "day", "title": "Hour", "type": "temporal"},
          {"format": "d", "field": "200", "type": "quantitative", "title": " 200"},
          {"format": "d", "field": "302", "type": "quantitative", "title": " 302"},
          {"format": "d", "field": "301", "type": "quantitative", "title": " 301"},
          {"format": "d", "field": "400", "type": "quantitative", "title": " 400"},
          {"format": "d", "field": "499", "type": "quantitative", "title": " 499"},
          {"format": "d", "field": "504", "type": "quantitative", "title": " 504"}
        ],
        "opacity": {
          "condition": {"param": "hover", "value": 0.3, "empty": false},
          "value": 0
        }
      },
      "params": [
        {
          "name": "hover",
          "select": {
            "nearest": true,
            "fields": ["day"],
            "on": "mouseover",
            "type": "point"
          }
        }
      ],
      "mark": {"point": false, "stroke": "#888", "type": "rule"}
    }
  ],
  "config": {
    "style": {"guide-title": {"fill": "#888"}, "guide-label": {"fill": "#888"}},
    "title": {"color": "#888", "subtitleColor": "#888"}
  },
  "encoding": {
    "x": {"field": "day", "title": "Hour", "type": "temporal"},
    "y": {"title": "Hits", "type": "quantitative"}
  },
  "data": {
    "values": [
      {
        "200": 1454,
        "301": 36,
        "302": 47,
        "400": null,
        "499": null,
        "504": null,
        "day": "2023-11-23T12:00:00"
      },
      {
        "200": 1568,
        "301": null,
        "302": null,
        "400": null,
        "499": null,
        "504": null,
        "day": "2023-11-23T13:00:00"
      },
      {
        "200": 1274,
        "301": 6,
        "302": 16,
        "400": 20,
        "499": 83,
        "504": 9,
        "day": "2023-11-23T14:00:00"
      },
      {
        "200": null,
        "301": 31,
        "302": 32,
        "400": 62,
        "499": 291,
        "504": 60,
        "day": "2023-11-23T15:00:00"
      },
      {
        "200": null,
        "301": 8,
        "302": null,
        "400": null,
        "499": 251,
        "504": 60,
        "day": "2023-11-23T16:00:00"
      }
    ]
  },
  "transform": [{"fold": ["200", "302", "301", "400", "499", "504"]}]
}