Search code examples
visualizationvega-litevega

Tooltips on points not working in vegalite v5 spec


I have the following Vega-Lite v5 spec:

vega editor

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "encoding": {
    "x": {"field": "col2", "type": "nominal"},
    "y": {"field": "col1", "type": "quantitative"},
    "color": {"field": "col3"},
    "opacity": {
      "condition": {
        "test": {"and": [{"param": "legend_color_0"}]},
        "value": 1
      },
      "value": 0.2
    }
  },
  "layer": [
    {
      "mark": {"type": "line", "tooltip": false},
      "params": [
        {
          "name": "legend_color_0",
          "select": {"type": "point", "encodings": ["color"], "toggle": "true"},
          "bind": "legend"
        }
      ]
    },
    {"mark": {"type": "point", "tooltip": true, "size": 100, "opacity": 0.5}}
  ],
  "data": {
    "values": [
      {"col1": 1, "col2": "a", "col3": "A"},
      {"col1": 3, "col2": "b", "col3": "A"},
      {"col1": 2, "col2": "c", "col3": "B"},
      {"col1": 4, "col2": "d", "col3": "B"}
    ]
  },
  "height": 250,
  "width": 350
}

tooltip is set to true on the layer with point marks, but no tooltips are showing up. Is this a bug in vega-lite?

I noticed that if I remove the params, the tooltips start to work. But I need the params section so that I can click on the legend to select individual groups.


Solution

  • Possibly a bug but I can get the spec working as per your requirements with the following:

    enter image description here

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "encoding": {
        "x": {"field": "col2", "type": "nominal"},
        "y": {"field": "col1", "type": "quantitative"},
        "color": {"field": "col3"},
        "opacity": {
          "condition": {"param": "legend_color_0", "value": 1},
          "value": 0.2
        }
      },
      "layer": [
        {
          "mark": {"type": "line", "tooltip": false},
          "params": [
            {
              "name": "legend_color_1",
              "select": {"type": "point", "fields": ["col3"], "toggle": "true"},
              "bind": "legend"
            }
          ]
        },
        {
          "mark": {"type": "point", "tooltip": true, "size": 100},
          "params": [
            {
              "name": "legend_color_0",
              "select": {"type": "point", "fields": ["col3"], "toggle": "true"},
              "bind": "legend"
            }
          ]
        }
      ],
      "data": {
        "values": [
          {"col1": 1, "col2": "a", "col3": "A"},
          {"col1": 3, "col2": "b", "col3": "A"},
          {"col1": 2, "col2": "c", "col3": "B"},
          {"col1": 4, "col2": "d", "col3": "B"}
        ]
      },
      "height": 250,
      "width": 350
    }