Search code examples
jsonlinechartvega-litelegend-propertiesdeneb

Legend Series Doubled in Line Chart

I've been trying to edit my legend on a line chart to use different symbols for each field in the series. My output on the actual chart is showing correctly, where each series had a different symbol, but my legend duplicates the series, one showing the original shapes with the correct colors, the other showing the correct shapes with the wrong color (just black). Am I missing something about how these properties need to be combined so it's not duplicated? Thanks in advance for the help. Link to online editor

Doubled Legend Series Image (also how do I get images to just show up in the post??)

Thanks, Bryan

Solution

  • enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/barley.json"},
  "layer": [
    {
      "mark": {"type": "line", "tooltip": true, "interpolate": "linear"},
      "encoding": {
        "stroke": {"field": "site", "type": "nominal", "legend": null},
        "opacity": {
          "condition": {
            "test": {"field": "__selected__", "equal": "false"},
            "value": 0.3
          },
          "value": 1
        }
      }
    },
    {
      "mark": {"type": "point"},
      "encoding": {
        "shape": {"field": "site", "type": "nominal"},
        "color": {"field": "site", "type": "nominal"},
        "opacity": {
          "condition": {
            "test": {"field": "__selected__", "equal": "false"},
            "value": 0.3
          },
          "value": 1
        }
      }
    }
  ],
  "encoding": {
    "y": {
      "field": "variety",
      "type": "nominal",
      "axis": {"grid": true},
      "sort": {
        "op": "average",
        "field": "All Except Difference",
        "order": "descending"
      }
    },
    "x": {
      "field": "yield",
      "type": "quantitative",
      "sort": {
        "op": "average",
        "field": "All Except Difference",
        "order": "descending"
      },
      "scale": {"zero": false}
    }
  }
}