Poor performance or failed renders for charts with a large number of legend entries

[tomhollander]

When a chart includes a legend with a very large number of entries, the performance is poor and often the chart fails to render at all. A legend with dozens or hundreds of entries is unlikely to be useful to chart viewers, but it is difficult to prevent in cases where end-users are dynamically creating charts from their own data.

It would be good if Vega could provide better performance even for poorly encoded charts - possibly by having a hard or user-controllable limit of the number of legend entries to display. I noticed that the legend's values attribute lets you define specific values to display, but I couldn't find any way to only show (say) the first 30 items and then stop rendering any more.

Example spec which fails to render due to the large number of legend items:

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "autosize": "pad",
  "padding": 5,
  "width": 200,
  "height": 200,
  "style": "cell",
  "data": [
    {
      "name": "source_0",
      "url": "data/seattle-temps.csv",
      "format": {"type": "csv", "parse": {"temp": "number", "date": "date"}}

    }

  ],
  "marks": [
    {
      "name": "marks",
      "type": "symbol",
      "style": ["point"],
      "from": {"data": "source_0"},
      "encode": {
        "update": {
          "opacity": {"value": 0.7},
          "fill": {"value": "transparent"},
          "stroke": {"scale": "color", "field": "date"},
          "x": {"scale": "x", "field": "date"},
          "y": {"scale": "y", "field": "temp"}
          
        }
      }
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "domain": {"data": "source_0", "field": "date"},
      "range": [0, {"signal": "width"}],
      "nice": true,
      "zero": false
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {"data": "source_0", "field": "temp"},
      "range": [{"signal": "height"}, 0],
      "nice": true,
      "zero": true
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "source_0", "field": "date", "sort": true},
      "range": "category"
    }
  ],
  "axes": [
    {
      "scale": "x",
      "orient": "bottom",
      "gridScale": "y",
      "grid": true,
      "tickCount": {"signal": "ceil(width/40)"},
      "domain": false,
      "labels": false,
      "maxExtent": 0,
      "minExtent": 0,
      "ticks": false,
      "zindex": 0
    },
    {
      "scale": "y",
      "orient": "left",
      "gridScale": "x",
      "grid": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "domain": false,
      "labels": false,
      "maxExtent": 0,
      "minExtent": 0,
      "ticks": false,
      "zindex": 0
    },
    {
      "scale": "x",
      "orient": "bottom",
      "grid": false,
      "labelFlush": true,
      "labelOverlap": true,
      "tickCount": {"signal": "ceil(width/40)"},
      "zindex": 0
    },
    {
      "scale": "y",
      "orient": "left",
      "grid": false,
      "labelOverlap": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "zindex": 0
    }
  ],
  "legends": [
    {
      "stroke": "color",
      "gradientLength": {"signal": "clamp(height, 64, 200)"},
      "symbolType": "circle",
      "title": "Legend",
      "encode": {
        "symbols": {
          "update": {
            "fill": {"value": "transparent"},
            "opacity": {"value": 0.7}
          }
        }
      }
    }
  ]
}

[jheer]

Thanks for the suggestion! I've updated Vega to support a symbolLimit property (default 30) for limiting the number of entries shown. If the limit is exceeded, the last legend entry shows an indicator of the missing entries (e.g., "...15 entries"). This change will be included in the 5.7.0 release.