How to 'set' legend order in Vega-Lite charts, bonus for being able to set/assign specific colors to specific lines

Question

Here is an example

I have a Vega-Lite chart where I would like to set/impose the order that items appear in the chart's legend (ex: have the 'Vorpal Rabbits' appear first, in the noted example).

Also, if it is possible, even though a color range is specified for the lines, can colors be assigned to some of the lines (the others can be the other values in the specified color range).

ex: if another line was added to the example and we add the color 'green' to the range. In the chart I would like to have the Vorpal Rabbits always be 'red' and appear first in the legend, before the other lines.

I tried having the transforms setup unique fields for the values I wanted fixed, and only use that one color in a color range. No bueno.

Answer 1

Please keep questions to just a single topic. The following should do what you want. The trick is to encode with color for Vorpol and stroke for any other lines. As you add more, Vorpal should always be red and first.

{
  "$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"}
    ],
        "dataset_id_3": [
      {"value": 20, "date": "2022-01-10T14:00:00.000Z"},
      {"value": 17, "date": "2022-02-10T14:00:00.000Z"},
      {"value": 90, "date": "2022-03-10T14:00:00.000Z"},
      {"value": 22, "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}
      }
    },
     {
      "data": {"name": "dataset_id_2"},
      "transform": [{"calculate": "'Vorpal Rabbits'", "as": "c"}],
      "mark": {"type": "line", "strokeWidth": 2, "stroke": "red"},
      "encoding": {
        "y": {
          "field": "value",
          "type": "quantitative",
          "axis": {"title": "Incidents"}
        },
        "x": {
          "timeUnit": "yearmonthdate",
          "field": "date",
          "title": "",
          "axis": {"labelFlush": true, "tickCount": 5}
        },
        "color": {"field":"c", "scale": {"domain":["Vorpol Rabbits"], "range": ["red"]}, "title":""}
      }
    },
    {
      "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": ["green", "blue"]},
          "field": "c",
          "legend": {
            "title": ""
          }
        }
      }
    },
       {
      "data": {"name": "dataset_id_3"},
      "transform": [{"calculate": "'Third line'", "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",
        }
      }
    }
  ]
}