HI to everyone.
I have a problem with resizing my vega-lite visualization which is part of my dashboard. The visualization is not resizing according to its container.
My visualization is a multi-view composed of three bar charts being concatenated horizontally using hconcat keyword:
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {
"values": [
{"categ": "A", "In": 7752664.91, "Out": 7998880.02, "Diff": -246215.11},
{"categ": "B", "In": 1896544.08, "Out": 1961014.26, "Diff": -64470.18},
{"categ": "C", "In": 992074.65, "Out": 985438.38, "Diff": 6636.27},
{"categ": "D", "In": 741681.84, "Out": 708572.92, "Diff": 33108.92},
{"categ": "E", "In":776910.05, "Out": 694022.87, "Diff": 82887.18}
]
},
"transform": [
{ "calculate": "abs(datum.Diff)", "as": "Diff-Abs" }
],
"config": {
"view": {"stroke": "transparent" },
"bar": { "fillOpacity": 0.8},
"axis": { "labelFontSize":14},
"title": { "fontSize": 18},
"text": {
"fontSize": 18,
"fontWeight": 500,
"align" : "center",
"dy": 5
}
},
"spacing": 40,
"hconcat":
[
{
"title":"In",
"encoding": {
"y": {
"field": "categ",
"type":"nominal",
"axis":{"title": "", "ticks": false, "labelPadding": 10}
}
},
"layer": [
{
"mark": { "type": "bar", "fill": "lightblue" },
"encoding": {
"x": {
"field": "In",
"type": "quantitative",
"axis": null
}
}
},
{
"mark": {"type": "text", "align": "center", "dy": 2},
"encoding": { "text": { "field": "In", "type": "nominal"}}
}
]
},
{
"title":"Out",
"encoding": {
"y": {
"field": "categ",
"type":"nominal",
"axis":{"title": "", "ticks": false, "labelPadding": 10}
}
},
"layer": [
{
"mark": { "type": "bar", "fill": "lightblue" },
"encoding": {
"x": {
"field": "Out",
"type": "quantitative",
"axis": null
}
}
},
{
"mark": {"type": "text", "align": "center", "dy": 2},
"encoding": { "text": { "field": "Out", "type": "nominal"}}
}
]
},
{
"title":"Diff",
"encoding": {
"y": {
"field": "categ",
"type":"nominal",
"axis":{"title": "", "ticks": false, "labelPadding": 10}
}
},
"layer": [
{
"mark": { "type": "bar", "fill": "lightgreen" },
"encoding": {
"x": {
"field": "Diff-Abs",
"type": "quantitative",
"axis": null
},
"color": { "condition": {"test": "Diff < 0", "value": "red" }}
}
},
{
"mark": {"type": "text", "align": "center", "dy": 2},
"encoding": { "text": { "field": "Diff", "type": "nominal"}}
}
]
}
]
}
If I, use just one bar chart (e.g. the first one ) as a single view visualization it resizer just fine ?! So it must be something with concatenating views!
EDIT:
I forgot to mention how I did find a similar thread here but that thread was closed automatically without a solution provided. Also, I would like to tag @nyuriks because of his reputation in vega and vega-light visualization here on the forum 
