Make charts responsive

[domoritz]

By adding a signal to listen to changes of https://vega.github.io/vega/docs/expressions/#containerSize or (probably better) use autosize: 'fit'.

[josesaranda]

To support parent container resize detector you can't do it with vega-spec. As you said in the previous link explain how to adjust size to window size but not to the container size.

[domoritz]

I'm not following.

containerSize gives you the size of the container.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 200,
  "padding": 5,
  "signals": [
    {
      "name": "size",
      "update": "containerSize()",
      "on": [
        {
          "events": {
            "source": "window",
            "type": "resize"
          },
          "update": "containerSize()"
        }
      ]
    }
  ],

  "marks": [
    {
      "type": "text",
      "encode": {
        "enter": {
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "black"}
        },
        "update": {
          "x": {"signal": "width", "mult": 0.5},
          "y": {"signal": "height", "mult": 0.5},
          "text": {"signal": "'size: ' + size"}
        }
      }
    }
  ]
}

Having said that, a better option may be to just use the autosize feature with fit ( https://vega.github.io/vega/docs/specification/).

[josesaranda]

What's about that? vega/vega#755 (comment)
You try to do that without javascript code but in your comment in another issue you said that it is necessary.

[josesaranda]

I tried before without any kind of javascript code using only containerSize as described in vega but it not work for me.

[domoritz]

I think that was before containerSize and better support for autosize: 'fit'. I think the latter should work. Have you tried it?

If it doesn't work we can use JavaScript but I'd like to avoid it. Does this sound like a good plan to you?

[josesaranda]

Yes i tried the latter but won't work. I don't like to do that using Javascript but i think there isn't another way to do that. Please approve it! You make my life easier.