Custom legend colors in Vega-Lite chart

Question

When I have more than one line layer on my chart, the line colors in the legend do not match the line color in the chart itself.

I want to have the legend color match the line color, ie, if the line in the chart is red, I want the matching legend color to be red as well.

On our charts the legend information for the dataset data is added in via: encoding.strokeWidth.datum

Which appears to work ok with a single dataset line, but when there are multiple dataset lines the legend colors don't match up with the line colors in the chart.

Being new to vega-lite, this seems like a side-effect to me, and not the correct way of addressing this.

Here is a Vega editor share showing a representative example. example

Answer 1

How's this?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.0.json",
  "title": "",
  "width": "container",
  "config": {
    "customFormatTypes": true,
    "axis": {
      "labelFont": "Roboto",
      "labelFontSize": 12,
      "labelFontWeight": 400,
      "labelColor": "0x5f6368"
    },
    "legend": {
      "symbolOpacity": 1,
      "orient": "bottom",
      "direction": "horizontal",
      "columns": 4
    }
  },
  "datasets": {
    "dataset_id_1": [
      {"value": 12, "date": "2022-01-10T14:00:00.000Z"},
      {"value": 22, "date": "2022-02-10T14:00:00.000Z"},
      {"value": 66, "date": "2022-03-10T14:00:00.000Z"},
      {"value": 33, "date": "2022-04-10T14:00:00.000Z"}
    ],
    "dataset_id_2": [
      {"value": 22, "date": "2022-01-10T14:00:00.000Z"},
      {"value": 12, "date": "2022-02-10T14:00:00.000Z"},
      {"value": 96, "date": "2022-03-10T14:00:00.000Z"},
      {"value": 33, "date": "2022-04-10T14:00:00.000Z"}
    ]
  },
  "layer": [
    {
      "data": {"values": [{"max": 100, "min": 20, "group": "top"}]},
      "mark": {"type": "rect", "color": "#1e8e3e", "opacity": 0.08},
      "encoding": {
        "y": {"aggregate": "max", "field": "max"},
        "y2": {"aggregate": "min", "field": "min"},
        "fill": {
          "field": "group",
          "title": "",
          "type": "nominal",
          "scale": {
            "domain": ["bottom", "top"],
            "range": ["#d93025", "#1e8e3e"]
          },
          "legend": {"symbolType": "square", "symbolOpacity": 0.2}
        },
        "opacity": {"value": 0.08}
      }
    },
    {
      "data": {"values": [{"max": 20, "min": 0, "group": "bottom"}]},
      "mark": {"type": "rect", "color": "#d93025", "opacity": 0.08},
      "encoding": {
        "y": {"aggregate": "max", "field": "max"},
        "y2": {"aggregate": "min", "field": "min"},
        "fill": {
          "field": "group",
          "title": "",
          "type": "nominal",
          "scale": {
            "domain": ["bottom", "top"],
            "range": ["#d93025", "#1e8e3e"]
          },
          "legend": {"symbolType": "square", "symbolOpacity": 0.2}
        },
        "opacity": {"value": 0.08}
      }
    },
    {
      "layer": [
        {
          "data": {"name": "dataset_id_1"},
          "transform": [{"calculate": "'Holy Handgrenades'", "as": "c"}],
          "mark": {"type": "line", "strokeWidth": 2},
          "encoding": {
            "y": {
              "field": "value",
              "type": "quantitative",
              "axis": {"title": "Incidents"}
            },
            "x": {
              "timeUnit": "yearmonthdate",
              "field": "date",
              "title": "",
              "axis": {"labelFlush": true, "tickCount": 5}
            },
            "stroke": {
              "scale": {"range": ["red", "blue"]},
              "field": "c",
              "legend": {"title": ""}
            }
          }
        },
        {
          "data": {"name": "dataset_id_2"},
          "transform": [{"calculate": "'Vorpal Rabbits'", "as": "c"}],
          "mark": {"type": "line", "strokeWidth": 2},
          "encoding": {
            "y": {
              "field": "value",
              "type": "quantitative",
              "axis": {"title": "Incidents"}
            },
            "x": {
              "timeUnit": "yearmonthdate",
              "field": "date",
              "title": "",
              "axis": {"labelFlush": true, "tickCount": 5}
            },
            "stroke": {"field": "c"}
          }
        }
      ]
    }
  ]
}