CODEWITHSUNDEEP
legendvega-lite
bluesmoon
bluesmoon

Reputation: 4320

How to combine vega-lite legends when including a rule mark in a separate layer?

I have a vega-lite visualization that uses shape and color as dimensions with the same field.

Typically the shape and color legends are merged into a single legend, however if I add a layer with a rule mark, the legends get split into two.

How do I keep the legends combined while keeping the rule mark in a separate layer?

Update: I also see a warning saying:

shape dropped as it is incompatible with "rule".

though I'm not sure what I should do about it.

Upvotes: 1

Views: 151

Answers (1)

davidebacci
davidebacci

Reputation: 30304

Here you go.

enter image description here

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "layer": [
    {
      "encoding": {
        "y": {"field": "b", "type": "quantitative"},
        "x": {"field": "a", "type": "nominal"},
        "shape": {"field": "c", "type": "nominal", "sort": {"field": "a"}},
        "color": {"field": "c", "type": "nominal", "sort": {"field": "a"}}
      },
      "mark": "point"
    },
    {
      "encoding": {
        "x": {"field": "a"},
        "opacity": {
          "condition": {"param": "hover", "value": 0.3, "empty": false},
          "value": 0
        }
      },
      "params": [
        {
          "name": "hover",
          "select": {
            "nearest": true,
            "fields": ["a"],
            "on": "mouseover",
            "type": "point"
          }
        }
      ],
      "mark": {"stroke": "#888", "type": "rule", "point": false}
    }
  ],
  "data": {
    "values": [
      {"a": "A", "b": 28, "c": "Blue"},
      {"a": "B", "b": 55, "c": "Yellow"},
      {"a": "C", "b": 43, "c": "Red"}
    ]
  }
}

Upvotes: 1

Related Questions