Legends make responsive charts unresponsive

[armsp]

I can make responsive charts using the Responsive Bar Chart Example. However, when I do the same for a different chart with a legend, the legend gets cropped and does not resize as the whole chart does.

Use the following in the online editor -

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": "container",
  "height": 300,
  "config": {"legend": {"gradientLength": 400, "orient": "bottom"}},
  "data": {
    "url": "data/us-10m.json",
    "format": {
      "type": "topojson",
      "feature": "counties"
    }
  },
  "transform": [{
    "lookup": "id",
    "from": {
      "data": {
        "url": "data/unemployment.tsv"
      },
      "key": "id",
      "fields": ["rate"]
    }
  }],
  "projection": {
    "type": "albersUsa"
  },
  "mark": "geoshape",
  "encoding": {
    "color": {
      "field": "rate",
      "type": "quantitative"
    }
  }
}

Unexpected Behaviour - Normal Cropped Is there a way to make the legends contract too based on container size?

Try it online here

[armsp]

@domoritz I would like to contribute to this if I can. But since I am new to this platform and honestly coming from Altair actually, can you guide me as to where should I look to understand why this happens in the first place so that I may come up with plans to mitigate it.

[domoritz]

Sure. The issue is, I think, that the legend doesn’t resize based on the width. So somehow we have to generate a Vega spec where the size of the legend is capped to the size of the view.

I’d recommend modifying the Vega spec by hand until you have the desired behavior and then see how we can automatically replicate what you did manually.

[armsp]

@domoritz, a few very basic questions - 1) By Vega Spec you mean this right? - https://vega.github.io/vega/docs/specification/ 2) As far as I know, I cannot randomly put anything in the spec, the keywords/parameters should be the ones that are already defined by Vega-Lite?...in that case whatever is defined for legend is allowed and anything else would give errors - is this right-thinking ? 3) Any resources on understanding the internals of this project?

[domoritz]

1. Yes. And you can see and edit the generated Vega in the editor
2. Let's modify Vega first before going into the design for Vega-Lite
3. The docs and https://github.com/vega/vega-lite/blob/master/CONTRIBUTING.md#directory-structure.

Just to note, this isn't going to be an easy thing to work on since there are a lot of projects involved.