I create a chart in vegalite and make a scroller (vconcat-1) that look like a scroller for large data . issue is that when i double click on scroller(vconcat-1) then chart render with whole , i did not want that, is there any way to stop dbclick event on chart canvas of vegalite chart by using js or vegalite can handle this by specs. note- plz dont stop single click on chart editor link
You need clear:false.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"Count": 210.64, "month": "Jan-21", "name": "DRC"},
{"Count": 179.95, "month": "Feb-21", "name": "WER"},
{"Count": 155.48, "month": "Mar-21", "name": "GHJ"},
{"Count": 230.72, "month": "Apr-21", "name": "THE"},
{"Count": 167.27, "month": "May-21", "name": "JUY"},
{"Count": 35.02, "month": "Jun-21", "name": "EDC"},
{"Count": 234.97, "month": "Jul-21", "name": "QSD"},
{"Count": 176.2, "month": "Aug-21", "name": "AXC"},
{"Count": 163.84, "month": "Sep-21", "name": "FDS"},
{"Count": 191.01, "month": "Oct-21", "name": "ASD"},
{"Count": 182.99, "month": "Nov-21", "name": "THN"},
{"Count": 119.79, "month": "Dec-21", "name": "RFV"},
{"Count": 124.74, "month": "Jan-22", "name": "WSX"},
{"Count": 241.88, "month": "Feb-22", "name": "QSA"},
{"Count": 163.01, "month": "Mar-22", "name": "KOI"},
{"Count": 137.3, "month": "Apr-22", "name": "YHN"},
{"Count": 0, "month": "May-22", "name": "YHJ"},
{"Count": 160.51, "month": "Jun-22", "name": "KLO"}
]
},
"transform": [{"window": [{"op": "row_number", "as": "row"}]}],
"description": "Google's stock price over time.",
"vconcat": [
{
"height": 250,
"layer": [
{
"encoding": {
"x": {
"field": "month",
"type": "nominal",
"sort": {"field": "row", "order": "ascending"}
},
"y": {
"field": "Count",
"scale": {"zero": false},
"type": "quantitative"
}
},
"mark": {"line": true, "point": true, "tooltip": true, "type": "area"}
}
],
"transform": [{"filter": {"param": "brush"}}],
"width": "container"
},
{
"encoding": {
"color": {"value": "lightGray"},
"x": {
"axis": {"labels": false, "ticks": false, "title": null},
"field": "month",
"type": "nominal",
"sort": {"field": "row", "order": "ascending"}
},
"y": {
"field": "Count",
"scale": {"zero": false},
"type": "quantitative"
}
},
"height": 40,
"mark": {"opacity": 1, "type": "area"},
"params": [
{
"name": "brush",
"select": {
"encodings": ["x"],
"translate": true,
"type": "interval",
"clear": false
}
}
],
"width": "container"
}
]
}