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

user_19427656 0
Viewed 63

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},
            },
        }
       ]
}
vega-lite
2 Answers

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

Editor

enter image description here

{
  "$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"]
      }
    }
  ]
}
user_183450370

You can place your text wherever you want using dx and dy properties. enter image description here

{
  "$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
      }
    }
  ]
}
user_183450370
Related