Adding a scrollbar in vegalite - vega-lite

Question

I am drawing a horizontal stacked bar-plot involving many datasets and want to add a vertical scrollbar because displaying all at once is not space efficient. I am drawing it using vegalite in observable notebook. So, I am wondering how to include scrollbar in vegalite?

Answer 1

You can create the same bar chart or a simple bar chart in hconcat having all the data but with a selection interval params. Then use the same param name to change the scales of original chart. So initially all the data will be visible but when you perform a selection on your simple bar chart it will give the effect of scrolling of bar chart.
Below is the sample code or refer editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/sp500.csv"},
"hconcat": [
{
"height": 400,
"width": 50,
"mark": {"type": "bar", "fill": "lightgray"},
"params": [
{"name": "brush", "select": {"type": "interval", "encodings": ["y"]}}
],
"encoding": {
"y": {"field": "date", "type": "temporal", "sort": "-x"},
"x": {
"field": "price",
"type": "quantitative",
"axis": {"tickCount": 3, "grid": false}
}
}
},
{
"height": 400,
"width": 480,
"mark": "bar",
"encoding": {
"y": {
"field": "date",
"type": "temporal",
"scale": {"domain": {"param": "brush"}},
"axis": {"title": ""}
},
"x": {"field": "price", "type": "quantitative"}
}
}
]
}
Other way to add a basic scrollbar by giving max-height and overflow scroll to a div in which the chart is embedded.
Below is the snippet or refer fiddle:
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "https://vega.github.io/editor/data/sp500.csv"},
"hconcat": [
{
"height": 1400,
"width": 300,
"mark": "bar",
"encoding": {
"y": {
"field": "date",
"type": "temporal",
"axis": {"title": ""}
},
"x": {"field": "price", "type": "quantitative"}
}
}
]
}
vegaEmbed("#vis", yourVlSpec, {renderer: 'svg'}).then(res => {
var view = res.view;
//console.log(view.data('source_0'));
});
.vegaDiv{
max-height: 300px;
overflow: scroll;
}
<script src="https://cdn.jsdelivr.net/npm/vega#5.20.2/build/vega.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#5.0.0/build/vega-lite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6.17.0/build/vega-embed.min.js"></script>
<div class="vegaDiv" id="vis"></div>