Vega-lite responsive size for column encoding facet chart

Viewed 116

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"
            }
]
}
}
0 Answers
Related