Can 'on-hover' text be added to VegaLite chart's legends for when the text to render gets cut off?

Question

An example

When I have overly long, or many items in the legend, some of the legend item's text will get truncated.

Is there some way of adding some 'on-hover' text so that when I mouse-over the legend item it will display all of the text?

Thank you

I could not figure out a way to do this from reading the spec documentation.

Answer 1

I am not aware of a way to do this in Vega-Lite, but it is possible to do in Vega.

You can view the compiled Vega spec in the panel below the code editor and choose "Edit Vega Spec". From here, the change is rather simple; in the compiled "legend", you can update the legend for the "stroke to make it interactive and add a tooltip as follows:

{
   "stroke": "stroke", "symbolType": "stroke",
   "encode": {
     "labels": {
       "interactive": true,
       "update": {"tooltip": {"field": "label"}}
     }
   }
}

The result will look something like this:

Another option for Vega (building on David's example) is to interactively update the limit on the legend as follows. For this version, it is useful to use the "vertical" layout, as otherwise the text will overlap when the limit is changed on hover.

{
  "stroke": "stroke", "symbolType": "stroke", "direction": "vertical",
  "encode": {
    "labels": {
      "interactive": true,
      "update": {"limit": {"value": 160}},
      "hover": {"limit": {"value": 300}}
    }
  }
}

The result on hover will look something like this: