I have a question on how might i ensure the width/height of facet chart? it seemed that the facet has limitation in following container height/width and doesn’t seem to allow for autosizing. I’m looking to implement a responsive, resizable facet chart
Here's my vega-lite config that im trying to make it responsive. So far setting width, or autosize wouldn't work.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"style": {
"cell": {
"stroke": "transparent"
}
}
},
"mark": {
"type": "bar",
"width": {
"band": 0.7
},
"tooltip": true,
"cornerRadiusEnd": 3,
"cursor": "pointer"
},
"encoding": {
"x": {
"field": "groupBy",
"type": "nominal",
"axis": null,
"sort": {
"encoding": "x",
"order": "ascending"
},
"scale": {
"paddingOuter": 0.5
}
},
"y": {
"field": "y",
"type": "quantitative",
"aggregate": "count",
"axis": {
"title": "Number"
}
},
"tooltip": [
{
"field": "x",
"title": "Pasted field 3"
},
{
"field": "y",
"type": "quantitative",
"aggregate": "count",
"title": "Number of records"
}
],
"color": {
"scale": {
"domain": [
"Office Supplies",
"Technology",
"Furniture",
null
],
"range": [
"rgb(207, 223, 255)",
"rgb(208, 240, 253)",
"rgb(194, 245, 233)",
"rgb(238, 238, 238)"
]
},
"field": "groupBy",
"title": "Pasted field 15",
"type": "nominal"
},
"column": {
"field": "x",
"axis": {
"title": "testing"
},
"type": "nominal",
"spacing": 0,
"header": {
"titleOrient": "bottom",
"labelOrient": "bottom"
}
}
},
"transform": [],
"data": {
"values": [
{
"x": "High",
"y": "recwvEUHpISbJqckL",
"groupBy": "Office Supplies"
},
{
"x": "High",
"y": "reckQZaPsli0YcpvJ",
"groupBy": "Office Supplies"
},
{
"x": "Low",
"y": "recZiThOpq7XVfN73",
"groupBy": "Office Supplies"
},
{
"x": "Medium",
"y": "recvjzdY3x8qbGF94",
"groupBy": "Office Supplies"
},
{
"x": "Critical",
"y": "recvkzoTPyG1XY5V1",
"groupBy": "Technology"
},
{
"x": "High",
"y": "recvlmkwSHXroRzqW",
"groupBy": "Technology"
},
{
"x": "Medium",
"y": "recvmnPqANnukXq59",
"groupBy": "Technology"
},
{
"x": "Not Specified",
"y": "recvmuosdhj24sFlE",
"groupBy": "Technology"
},
{
"x": "Medium",
"y": "recvmNkfVu2XjKs94",
"groupBy": "Office Supplies"
},
{
"x": "Not Specified",
"y": "recvRlJuppQLbjODM",
"groupBy": "Furniture"
},
{
"x": "Critical",
"y": "recvUd9XcD5OzZF4b",
"groupBy": "Technology"
},
{
"x": "Not Specified",
"y": "recvVHCgzxHXFVjG3",
"groupBy": "Office Supplies"
}
]
}
}