vega
Make charts responsive
By adding a signal to listen to changes of https://vega.github.io/vega/docs/expressions/#containerSize or (probably better) use autosize: 'fit'.
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.
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/).
What's about that? https://github.com/vega/vega/issues/755#issuecomment-423834991 You try to do that without javascript code but in your comment in another issue you said that it is necessary.
I tried before without any kind of javascript code using only containerSize as described in vega but it not work for me.
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?
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.