CODEWITHSUNDEEP
visualizationvega-litevega
the21st
the21st

Reputation: 1096

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.

Upvotes: 1

Views: 247

Answers (1)

davidebacci
davidebacci

Reputation: 30219

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
}

Upvotes: 1

Related Questions