How can I add like a textbox with longer text to a chart in vega-lite?

Question

I have an Scatterplot with a second layer for two lines with benchmark-data, now I need like a legend for these lines. I already managed to include them to the legend of the Scatterplot, but that does not help, as the legends name does not fit for these additional lines and especially the despriction is too long, to be displayed as a legend entry.

What I have is this (the lowest two points in the legend): Only two words for description in legend

And what I need is this:

colored textboxes with description

   const spec = {
    ...sharedChartSpec,
    height: 350,
    config: {
        axis: {
            tickColor: 'lightgrey',
            titleFontSize: 15,
            grid:false
        },
        style: {
            cell: {
                stroke: "transparent"
            }
        },
    },
    // title: {text: "Spezifischer Energieverbrauch [kWh/m2]", align: "center"},
    layer: [
       {
            data: {name: 'values'}, // note: vega-lite data attribute is a plain object instead of an array,
            mark: {type: 'circle', size: 20, opacity: 1},
            encoding: {
                x: {field: 'constructionYear', type: 'temporal', timeUnit: 'year', axis: {title: ''}, "scale": {"domain": [1880,2022]}},
                y: {field: 'consumption_perm2', type: 'quantitative', axis: {title: null}, "scale": {"domain": [0, 350]}},
                color: {field: 'heater', type: 'nominal', scale: customScale, title: 'Energieträger'},
                opacity: {condition: {param: "Heater", value: 1},
                    value: 0.2},
                tooltip: [
                    {field: "address", type: "nominal", title:'Adresse', fontSize:5},
                    {field: "town", type: "nominal", title:'Ort'},
                    {field: "heater", type: "nominal", title:'Primärer Energieträger'},
                    {field: "consumption_perm2", type: "quantitative", title:'Verbrauch in kWh/m2'},
                    {field: "EEK", type: "nominal", title:'EEK'}
                ]
            },

            params: [
                {
                    "name": "grid",
                    "select": "interval",
                    "bind": "scales"
                },
                {
                    "name": "Heater",
                    "select": {"type": "point", "fields": ["heater"]},
                    "bind": "legend"
                }
            ],
       },
       {
            data: {name: 'benchmark'},
            mark: {type: 'line'},
            encoding: {
                x: {field: 'constructionYear', type: 'temporal', timeUnit: 'year', axis: {title: null}},
                y: {field: 'consumption_perm2', type: 'quantitative', axis: {title: null}},
                color: {field: 'typ', type: 'nominal', scale: customScale},
        }
        },
        {
            data: {name: 'demand'},
            mark: {type: 'line'},
            encoding: {
                x: {field: 'constructionYear', type: 'temporal', timeUnit: 'year', axis: {title: null}},
                y: {field: 'consumption_perm2', type: 'quantitative', axis: {title: null}},
                color: {field: 'typ', type: 'nominal', scale: customScale},
            },
        }
       ]
}

Answer 1

I can't reuse your code but here is an example of multiline annotation which you should be able to build on.

Editor

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "encoding": {
        "x": {"aggregate": "max", "field": "date", "type": "temporal"},
        "y": {
          "aggregate": {"argmax": "date"},
          "field": "price",
          "type": "quantitative"
        }
      },
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "bottom",
        "text": ["Line 1", "Line 2"]
      }
    }
  ]
}

Answer 2

You can place your text wherever you want using dx and dy properties.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "data": {"values": [{}]},
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "bottom",
        "text": ["Line 1", "Line 2"],
        "dx": 150,
        "dy": -50
      }
    }
  ]
}