How to create a custom legend using Vega-Lite (combined line and symbol)

Question

I am fairly new to Vega-Lite and am attempting to fulfil a request to create a rather unorthodox report, essentially combining 3 types of charts (stacked column, clustered column and line on 2nd Y axis). Whilst I got most of the layout desired: mock up

I wanted to know if there is a way to create a custom legend (and colors) to look something like this:

custom legend

If it helps, here's the link to the code / date https://vega.github.io/editor/#/url/vega-lite/N4IgJghgLhIFygG4QDYFcCmBneBtUAsgPYB2UAFvAIwA0IAwkSkQE7wgBC6GIdAyqmzUADMP6CsAAgAyATXgBOMSAAqEFgHMMURQFY6ANSZoAtjzgBmUQF8ahUhWp1GzNnBABxFhgwleIARQhOF0ANmVA7Bl5OAAOUTo1TW14WPjDYzNqACYbOxBiMko4bOcmVnYuTH9InDgqK3EgqTlqAHZlJK0deqUM9Cy4ABZdYVt7IvhShnK3T29fGol4cIiJaJXQ-VV1bpX0kCMB8ypcsfzCx0sy10ruJeaphID11vrRxN2U+q3+03MhnkJlcLDcKu4vD4-E1gm0Pi9mht6qJOl8elQqM8jv8ckCCg5ikMwXMqjwYXUDrUkZjtl1vqdlNjBqNzsDCcT2JDFuTUs8qW9Vp9kj1QuE-oMGWMALq2EAAdwAlmAQc9yBgFRpyD0rMoUBAAJ4YNz4EAkCCDAIAQWkAFE+P4TOoANbwUBQfUAB3MIAARup-AAPADyADMQ1hvsosAqAF4nZQAY1m7AAxLEqAm2rEhiBZb4k2AFSQNK6QAHSyGFRgUGB2JdKHR3V72KxC2aUP4IAGFXVQHqfdXLcWgvAxrL9RWqzX2LV-E3vQBHNAQMgKmBQBWIHiypO3BAgSvV2vuFwVRue70kIgmIuoXPWcam83evjWu0bOiOlgu-fz9h+tg6GDMMIx6ABaDE6GjOMRDoXdwRAFMqAwNIMF0XM6HzIg2xLfdy33Q9p3ces5wvFsWDbO86C7HtS37Qdh3MMc6AnAip2PBEolac9m3cJcVw3ddNzJEAaLqEg0BQFAd2TNij3YU9AJAP93CvG923vR8zQtFRLQAJQ8G0VAdZ1SxU31-SA0Nw3pWgQGg+M4NkxDkNQ9C8xIAsi1w0B8NAQiOJInjvVbW8O2o7texAeiUCHDQRzgZiQFY-z2PYOkdGC9h+NXISt07SL4AkqSHy0592AMINpAAVQIG0TO-MyyPcFAixE+C5g0BY-A8rzi1LPyDzS4iCVI3iQFCjTx1LCANC6jANGgb0sFMfwAoqzIRPMnLBOgYTNKlOhvCwJh8v3LAE0EUtWJAIswAwL0SHushNKAA

Any help would be greatly appreciated!!

Answer 1

You don't need a fold transform - just an explicit column value to refer to. e.g.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "Month": 1,
        "Color": "Blue",
        "Sales": 100,
        "Sales LY": 90,
        "Target": 95,
        "Volume": 300
      },
      {
        "Month": 1,
        "Color": "Green",
        "Sales": 560,
        "Sales LY": 800,
        "Target": 880,
        "Volume": 1200
      },
      {
        "Month": 2,
        "Color": "Blue",
        "Sales": 130,
        "Sales LY": 170,
        "Target": 190,
        "Volume": 450
      },
      {
        "Month": 2,
        "Color": "Green",
        "Sales": 600,
        "Sales LY": 665,
        "Target": 680,
        "Volume": 1200
      },
      {
        "Month": 3,
        "Color": "Blue",
        "Sales": 200,
        "Sales LY": 150,
        "Target": 165,
        "Volume": 400
      },
      {
        "Month": 3,
        "Color": "Green",
        "Sales": 750,
        "Sales LY": 1000,
        "Target": 1100,
        "Volume": 1200
      },
      {
        "Month": 4,
        "Color": "Blue",
        "Sales": 80,
        "Sales LY": 105,
        "Target": 120,
        "Volume": 500
      },
      {
        "Month": 4,
        "Color": "Green",
        "Sales": 800,
        "Sales LY": 600,
        "Target": 660,
        "Volume": 1200
      }
    ]
  },
  "transform": [{"calculate": "'Volume'", "as": "Volume Legend"}],
  "width": 300,
  "height": 300,
  "layer": [
    {
      "name": "SALES",
      "mark": {"type": "bar", "xOffset": 0, "size": 10, "color": "#81c784"},
      "encoding": {
        "x": {"field": "Month", "type": "ordinal", "axis": {"labelAngle": 0}},
        "y": {"field": "Sales", "type": "quantitative"},
        "color": {"field": "Color", "type": "nominal"}
      }
    },
    {
      "name": "SALES LY",
      "mark": {"type": "bar", "xOffset": -11, "size": 10, "color": "#1e88e5"},
      "encoding": {
        "x": {"field": "Month", "type": "ordinal", "axis": {"labelAngle": 0}},
        "y": {"field": "Sales LY", "type": "quantitative", "axis": null},
        "color": {"field": "Color", "type": "nominal"}
      }
    },
    {
      "name": "TARGET",
      "mark": {"type": "bar", "xOffset": 11, "size": 10, "color": "#1e88e5"},
      "encoding": {
        "x": {"field": "Month", "type": "ordinal", "axis": {"labelAngle": 0}},
        "y": {"field": "Target", "type": "quantitative", "axis": null}
      }
    },
    {
      "name": "VOLUME",
      "mark": {"type": "line"},
      "encoding": {
        "x": {"field": "Month", "type": "ordinal"},
        "y": {"aggregate": "sum", "field": "Volume", "type": "quantitative"},
        "stroke": {
          "field": "Volume Legend",
          "scale": {"range": ["green"]},
          "legend": {"title": "",}
        }
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}}
}