Responsive charts based on container size

This is a Vega 3 feature request: Provide a way to resize the graph based on the container’s height/width.

With a combination of the window resize event and windowSize expression, there’s a way to resize the graph based on the window’s dimensions but not the container.

I’ve been told a workaround is to update the view instance with the containers height/width on window resize.

Example:

$(window).on('resize', function() {
    // assume I have an element and viewInstance variables representing
    // the container, and vega View instance, respectively. 
    const $element = $(element)
    const width = $element.width();
    const height = $element.height();
    viewInstance.width(width).height(height).run();
});

Perhaps there is an easier and more elegant way to do this within Vega?

[Casyfill]

@brylie here is our (definitely imperfect) solution, with width/height listener outside (in main.js). in this case, only the width was made responsive purposefully - but it is trivial to add height as well.

example

with that being said, indeed It would be great to have this automated one way or another - for example, if vegaEmbed or vega itself would expose globalWidth and globalHeight signals

[brylie]

If possible, the charts should be responsive automatically (see: Plot.ly). Wiring up screen resize events to chart dimensions should be abstracted by the library, unless specifically needing to be overridden. Just my two cents.