Allow long legend items to be split over multiple lines, rather than truncating them

[aragilar]

It appears that if a label for a line (or similar mark) is sufficiently long, it gets truncated, with ... appearing at the end. Would it be possible split the label over multiple lines, or allow users to pass in newlines to hint where there should be new lines? An screenshot where the label is truncated is below.

[domoritz]

You can set the number of columns already. Open the Chart in the Vega Editor

[aragilar]

Having multiple columns does not seem to change how a single label acts (the label there is 35 characters long, but only 29 of them are displayed).

[domoritz]

Ahh, right, you can set the maximum length with labelLimit. To split a label over multiple lines, you would need to make the labels encoding into an array as in Open the Chart in the Vega Editor. Unfortunately, we only support this in Vega right now.

Let's open this again as a feature request to support label breaks in Vega-Lite.

[domoritz]

We do have unofficial support for setting an encode block in a Vega-Lite spec. Please don't rely on this feature as we may change it in the future (although it's been there for years).

You can write expressions in signals and therefore can decide how you would want to split your labels. You can learn more about expressions at https://vega.github.io/vega/docs/expressions/.

Open the Chart in the Vega Editor

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/movies.json"},
  "width": 400,
  "height": 100,
  "transform": [
    {
      "density": "IMDB_Rating",
      "bandwidth": 0.3,
      "groupby": ["Major_Genre"],
      "extent": [0, 10],
      "counts": true,
      "steps": 50
    }
  ],
  "mark": "area",
  "encoding": {
    "x": {"field": "value", "type": "quantitative"},
    "y": {"field": "density", "type": "quantitative", "stack": true},
    "color": {
      "field": "Major_Genre",
      "type": "nominal",
      "scale": {"scheme": "category20"},
      "legend": {
        "encode": {
          "labels": {
            "update": {"text": {"signal": "[datum.value, datum.value]"}}
          }
        }
      }
    }
  }
}

[aragilar]

Ah, cool, I'll see what I can do with labelLimit. I've been generating my plots via altair, so once vega-lite supports label breaks, I'll look at adding support into altair.

[domoritz]

Sounds good. Thanks for sending your feature request.