CODEWITHSUNDEEP
vega-lite
aborruso
aborruso

Reputation: 5728

vega-lite: how to set responsive width using facet?

In this page I have two charts, a single one and a facet one.

This is the config for the first in which I have set "width": "container" and I have a responsive width for this one.

This is the second config file. I have 3 columns. If I set in it "width": "container" it is the single graph of a column that fits the width of the container, not the three columns together.

Is there any way to make it responsive in relation to the width of the three columns together?

enter image description here

Upvotes: 4

Views: 1615

Answers (1)

wahab memon
wahab memon

Reputation: 2416

I don't think you can provide width: container to facet charts as it might not support. I can clearly see warnings in logs: [Warning] Width "container" only works for single views and layered views.

As I understand your issue, you are unable get the full width of above chart (single view chart). You can try the following for that:

  1. Provide autosize in above chart:

    "autosize": {"contains": "padding", "resize": true, "type": "fit"}

  2. Another workaround is you can get the width of facet chart, once its rendered and then try to set the width of single chart programmatically using Vega Api:

    view.width(1000).run()

To test this in vega editor, use VEGA_DEBUG to access view: VEGA_DEBUG.view.width(1800).run()

Let me know if this works.

Upvotes: 1

Related Questions