Axis label dissappear when adding zooming (Vega-Lite) - zooming

Question

I try to show timeseries data as point charts with two x-axis labels (2 text marks as my main x-axis attribute should not be displayed), mainly one at the top and one at the bottom. This works with a layered approach but as soon as I add the zoomable parameter to the visual, the text mark for the axes labels disappear. Is there a way on how to solve this issue?
That's how the visual looks like - without adding the zooming feature:
Timeseries point visual with two measure attributes and top and bottom x-axis label
What I’ve tried so far
I tried to position the params at different positions in the code as I am also using a vertical rule but it did not work out.
I also tried to make use of the scale resolve but I was neither successful.
Within the resolve, I tried to make use of the labelBound axis information and set it to false.
Basically, here is the code that I am currently using
{
"data": {
"name": "dataset"
},
"encoding": {
"x": {
"field": "TIMESTAMP",
"timeUnit": "utcyearmonthdatehoursminutes",
"type": "ordinal",
"axis": {
"grid": false,
"title": null,
"orient": "bottom",
"labels": false
}
}
},
"vconcat": [
{
"hconcat": [
{
"layer": [
{
"transform": [
{
"fold": [
"ATTRIBUTE1",
"ATTRIBUTE2"
],
"as": [
"measure1",
"temp1"
]
}
],
"mark": {
"type": "point",
"filled": true,
"size": 20
},
"height": 150,
"width": 700,
"encoding": {
"x": {
"timeUnit": "utcyearmonthdatehoursminutes",
"field": "TIMESTAMP",
"type": "ordinal",
"axis": {
"title": null,
"labels": false,
"ticks": false
}
},
"y": {
"field": "temp1",
"type": "quantitative",
"axis": {
"title": null
},
"scale": {
"zero": false,
"domain": [
450,
490
]
}
},
"color": {
"field": "measure1",
"type": "nominal",
"legend": {
"title": "Measures",
"orient": "right"
}
},
"opacity": {
"condition": [
{
"param": "legendhighlight",
"value": 1,
"empty": false
},
{
"param": "hover",
"value": 1,
"empty": false
}
],
"value": 0.1
}
}
},
{
"mark": {
"type": "text",
"align": "left",
"angle": -90,
"fontSize": 10
},
"encoding": {
"x": {
"timeUnit": "utcyearmonthdatehoursminutes",
"field": "TIMESTAMP",
"type": "ordinal",
"axis": {
"title": null,
"labels": false
}
},
"text": {
"field": "Attribute_TopX"
},
"y": {
"value": -5
},
"color": {
"condition": [
{
"test": "datum['COLORATTRIBUTE']=='COLOR_ITEM1'",
"value": "green"
},
{
"test": "datum['COLORATTRIBUTE']=='COLOR_ITEM2'",
"value": "steelblue"
}
],
"value": "black"
}
}
},{
"mark": {
"type": "text",
"align": "right",
"angle": -90,
"fontSize": 10
},
"encoding": {
"x": {
"timeUnit": "utcyearmonthdatehoursminutes",
"field": "TIMESTAMP",
"type": "ordinal",
"axis": {
"title": null,
"labels": false
}
},
"text": {
"field": "Attribute_BottomX"
},
"y": {
"value": "height"
},
"color": {
"condition": [
{
"test": "datum['COLORATTRIBUTE']=='COLOR_ITEM1'",
"value": "green"
},
{
"test": "datum['COLORATTRIBUTE']=='COLOR_ITEM2'",
"value": "steelblue"
}
],
"value": "black"
}
}
},
{
"mark": "rule",
"encoding": {
"x": {
"field": "TIMESTAMP",
"type": "temporal"
},
"opacity": {
"condition": [
{
"param": "hover",
"value": 0.8,
"empty": false
}
],
"value": 0
},
"size": {
"value": 1
},
"params": [
{
"name": "hover",
"select": {
"type": "point",
"encodings": [
"x"
],
"nearest": true,
"on": "mouseover"
}
},
{
"name": "legendhighlight",
"select": {
"type": "point",
"fields": [
"measure1"
]
},
"bind": "legend"
}
]
}
]
},
{
"layer": [
{
"transform": [
{
"fold": [
"ATTRIBUTE1",
"ATTRIBUTE2"
],
"as": [
"measure1",
"temp1"
]
}
],
"mark": {
"type": "boxplot"
},
"height": 150,
"width": 100,
"encoding": {
"x": {
"field": "measure1",
"type": "nominal",
"axis": {
"labels": false,
"ticks": false,
"title": null
}
},
"y": {
"field": "temp1",
"type": "quantitative",
"axis": {
"labels": false,
"ticks": false,
"title": null
},
"scale": {
"zero": false
}
},
"color": {
"field": "measure1",
"type": "nominal",
"legend": null
}
}
}
]
}
]
}
],
"resolve": {
"scale": {
"y": "independent",
"x": "shared",
"color": "independent"
}
}
}
And here is the params code that I try to add using Vega-Lite v5:
"params": [
{
"name": "grid",
"select": "interval",
"bind": "scales"
}
],
Thank you for your help!