I am trying to add scroller in vegalite chart by just using vconcat composition, issue is that tooltip not visible/shown of vconcat[0] (main chart) but tooltip is completely visible in vconcat[1] (for scroller) ,why making tooltip true is not working in vconcat[0] (main chart) I want by making tooltip true in mark show tooltip on hover in chart without external defining toottip in encoding.
Editor link-https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQAEySYUqUAwBOgtCrVJOOMQAZTlKBGIgAvkuJQ5UNWgDaoAO41l9NABYADlMlZG0AazRQTABPHDh9JiRtRRBMNjZBTBocNExtBjh7EDhZJ2UaWTIokAAPGoAzGjhBZX1VTASlWPj9ToQcNm0kPSVoEYTNFTZkSpqcZKQERIKIGDtipFqaCBrszEFJkA2lGMbm1v0cbRooLrS4o4BHBiRZfbUaUg37Lx8-VBBEIYOA0MhYNAANmBYUiUx6RySKW6GSyOTyBSKSgWwwQu1QHhAsiWiNW6zGLTgUEwe0e+kqnW0xBGqVK5UqZHxbjqIAAurZbLylGy2BUqjV6lMmi02ugOvcEX1EINhnpimcpRdZSBrrcFXT0C83h9st8lFsdntbuEAMJsBjvNAAZiUZBusoaIwgRQFgtsQA
I want by making tooltip true in mark show tooltip on hover in chart without external defining toottip in encoding.
Turn interactive to true.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"background": "white",
"padding": 5,
"width": 480,
"data": [
{"name": "brush_store"},
{
"name": "source_0",
"url": "data/sp500.csv",
"format": {"type": "csv", "parse": {"date": "date"}, "delimiter": ","}
},
{
"name": "data_0",
"source": "source_0",
"transform": [
{
"type": "stack",
"groupby": ["date"],
"field": "price",
"sort": {"field": [], "order": []},
"as": ["price_start", "price_end"],
"offset": "zero"
},
{
"type": "filter",
"expr": "(isDate(datum[\"date\"]) || (isValid(datum[\"date\"]) && isFinite(+datum[\"date\"]))) && isValid(datum[\"price\"]) && isFinite(+datum[\"price\"])"
}
]
},
{
"name": "data_1",
"source": "source_0",
"transform": [
{
"type": "stack",
"groupby": ["date"],
"field": "price",
"sort": {"field": [], "order": []},
"as": ["price_start", "price_end"],
"offset": "zero"
},
{
"type": "filter",
"expr": "(isDate(datum[\"date\"]) || (isValid(datum[\"date\"]) && isFinite(+datum[\"date\"]))) && isValid(datum[\"price\"]) && isFinite(+datum[\"price\"])"
}
]
}
],
"signals": [
{"name": "concat_0_height", "value": 200},
{"name": "concat_1_height", "value": 60},
{
"name": "unit",
"value": {},
"on": [
{"events": "pointermove", "update": "isTuple(group()) ? group() : unit"}
]
},
{
"name": "brush",
"update": "vlSelectionResolve(\"brush_store\", \"union\")"
}
],
"layout": {"padding": 20, "columns": 1, "bounds": "full", "align": "each"},
"marks": [
{
"type": "group",
"name": "concat_0_group",
"style": "cell",
"encode": {
"update": {
"width": {"signal": "width"},
"height": {"signal": "concat_0_height"}
}
},
"marks": [
{
"name": "concat_0_marks",
"type": "rect",
"clip": true,
"style": ["bar"],
"interactive": true,
"from": {"data": "data_0"},
"encode": {
"update": {
"tooltip": {
"signal": "{\"date\": timeFormat(datum[\"date\"], '%b %d, %Y'), \"price\": format(datum[\"price\"], \"\")}"
},
"fill": {"value": "#4c78a8"},
"ariaRoleDescription": {"value": "bar"},
"description": {
"signal": "\"date: \" + (timeFormat(datum[\"date\"], '%b %d, %Y')) + \"; price: \" + (format(datum[\"price\"], \"\"))"
},
"xc": {"scale": "concat_0_x", "field": "date"},
"width": {"value": 5},
"y": {"scale": "concat_0_y", "field": "price_end"},
"y2": {"scale": "concat_0_y", "field": "price_start"}
}
}
}
],
"axes": [
{
"scale": "concat_0_x",
"orient": "bottom",
"gridScale": "concat_0_y",
"grid": true,
"tickCount": {"signal": "ceil(width/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_0_y",
"orient": "left",
"gridScale": "concat_0_x",
"grid": true,
"tickCount": {"signal": "ceil(concat_0_height/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_0_x",
"orient": "bottom",
"grid": false,
"labelFlush": true,
"labelOverlap": true,
"tickCount": {"signal": "ceil(width/40)"},
"zindex": 0
},
{
"scale": "concat_0_y",
"orient": "left",
"grid": false,
"title": "price",
"labelOverlap": true,
"tickCount": {"signal": "ceil(concat_0_height/40)"},
"zindex": 0
}
]
},
{
"type": "group",
"name": "concat_1_group",
"style": "cell",
"encode": {
"update": {
"width": {"signal": "width"},
"height": {"signal": "concat_1_height"}
}
},
"signals": [
{
"name": "brush_x",
"value": [],
"on": [
{
"events": {
"source": "scope",
"type": "pointerdown",
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\""
]
},
"update": "[x(unit), x(unit)]"
},
{
"events": {
"source": "window",
"type": "pointermove",
"consume": true,
"between": [
{
"source": "scope",
"type": "pointerdown",
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\""
]
},
{"source": "window", "type": "pointerup"}
]
},
"update": "[brush_x[0], clamp(x(unit), 0, width)]"
},
{
"events": {"signal": "brush_scale_trigger"},
"update": "[scale(\"concat_1_x\", brush_date[0]), scale(\"concat_1_x\", brush_date[1])]"
},
{
"events": [{"source": "view", "type": "dblclick"}],
"update": "[0, 0]"
},
{
"events": {"signal": "brush_translate_delta"},
"update": "clampRange(panLinear(brush_translate_anchor.extent_x, brush_translate_delta.x / span(brush_translate_anchor.extent_x)), 0, width)"
},
{
"events": {"signal": "brush_zoom_delta"},
"update": "clampRange(zoomLinear(brush_x, brush_zoom_anchor.x, brush_zoom_delta), 0, width)"
}
]
},
{
"name": "brush_date",
"on": [
{
"events": {"signal": "brush_x"},
"update": "brush_x[0] === brush_x[1] ? null : invert(\"concat_1_x\", brush_x)"
}
]
},
{
"name": "brush_scale_trigger",
"value": {},
"on": [
{
"events": [{"scale": "concat_1_x"}],
"update": "(!isArray(brush_date) || (+invert(\"concat_1_x\", brush_x)[0] === +brush_date[0] && +invert(\"concat_1_x\", brush_x)[1] === +brush_date[1])) ? brush_scale_trigger : {}"
}
]
},
{
"name": "brush_tuple",
"on": [
{
"events": [{"signal": "brush_date"}],
"update": "brush_date ? {unit: \"concat_1\", fields: brush_tuple_fields, values: [brush_date]} : null"
}
]
},
{
"name": "brush_tuple_fields",
"value": [{"field": "date", "channel": "x", "type": "R"}]
},
{
"name": "brush_translate_anchor",
"value": {},
"on": [
{
"events": [
{
"source": "scope",
"type": "pointerdown",
"markname": "brush_brush"
}
],
"update": "{x: x(unit), y: y(unit), extent_x: slice(brush_x)}"
}
]
},
{
"name": "brush_translate_delta",
"value": {},
"on": [
{
"events": [
{
"source": "window",
"type": "pointermove",
"consume": true,
"between": [
{
"source": "scope",
"type": "pointerdown",
"markname": "brush_brush"
},
{"source": "window", "type": "pointerup"}
]
}
],
"update": "{x: brush_translate_anchor.x - x(unit), y: brush_translate_anchor.y - y(unit)}"
}
]
},
{
"name": "brush_zoom_anchor",
"on": [
{
"events": [
{
"source": "scope",
"type": "wheel",
"consume": true,
"markname": "brush_brush"
}
],
"update": "{x: x(unit), y: y(unit)}"
}
]
},
{
"name": "brush_zoom_delta",
"on": [
{
"events": [
{
"source": "scope",
"type": "wheel",
"consume": true,
"markname": "brush_brush"
}
],
"force": true,
"update": "pow(1.001, event.deltaY * pow(16, event.deltaMode))"
}
]
},
{
"name": "brush_modify",
"on": [
{
"events": {"signal": "brush_tuple"},
"update": "modify(\"brush_store\", brush_tuple, true)"
}
]
}
],
"marks": [
{
"name": "brush_brush_bg",
"type": "rect",
"clip": true,
"encode": {
"enter": {
"fill": {"value": "#333"},
"fillOpacity": {"value": 0.125}
},
"update": {
"x": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"signal": "brush_x[0]"
},
{"value": 0}
],
"y": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"value": 0
},
{"value": 0}
],
"x2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"signal": "brush_x[1]"
},
{"value": 0}
],
"y2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"field": {"group": "height"}
},
{"value": 0}
]
}
}
},
{
"name": "concat_1_marks",
"type": "rect",
"style": ["bar"],
"interactive": true,
"from": {"data": "data_1"},
"encode": {
"update": {
"tooltip": {
"signal": "{\"date\": timeFormat(datum[\"date\"], '%b %d, %Y'), \"price\": format(datum[\"price\"], \"\")}"
},
"fill": {"value": "#4c78a8"},
"ariaRoleDescription": {"value": "bar"},
"description": {
"signal": "\"date: \" + (timeFormat(datum[\"date\"], '%b %d, %Y')) + \"; price: \" + (format(datum[\"price\"], \"\"))"
},
"xc": {"scale": "concat_1_x", "field": "date"},
"width": {"value": 5},
"y": {"scale": "concat_1_y", "field": "price_end"},
"y2": {"scale": "concat_1_y", "field": "price_start"}
}
}
},
{
"name": "brush_brush",
"type": "rect",
"clip": true,
"encode": {
"enter": {"fill": {"value": "transparent"}},
"update": {
"x": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"signal": "brush_x[0]"
},
{"value": 0}
],
"y": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"value": 0
},
{"value": 0}
],
"x2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"signal": "brush_x[1]"
},
{"value": 0}
],
"y2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"field": {"group": "height"}
},
{"value": 0}
],
"stroke": [
{"test": "brush_x[0] !== brush_x[1]", "value": "white"},
{"value": null}
]
}
}
}
],
"axes": [
{
"scale": "concat_1_x",
"orient": "bottom",
"gridScale": "concat_1_y",
"grid": true,
"tickCount": {"signal": "ceil(width/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_1_x",
"orient": "bottom",
"grid": false,
"title": "date",
"labelFlush": true,
"labelOverlap": true,
"tickCount": {"signal": "ceil(width/40)"},
"zindex": 0
},
{
"scale": "concat_1_y",
"orient": "left",
"grid": false,
"title": "price",
"tickCount": 3,
"labelOverlap": true,
"zindex": 0
}
]
}
],
"scales": [
{
"name": "concat_0_x",
"type": "time",
"domain": {"data": "data_0", "field": "date"},
"domainRaw": {"signal": "brush[\"date\"]"},
"range": [0, {"signal": "width"}],
"padding": 5
},
{
"name": "concat_0_y",
"type": "linear",
"domain": {"data": "data_0", "fields": ["price_start", "price_end"]},
"range": [{"signal": "concat_0_height"}, 0],
"nice": true,
"zero": true
},
{
"name": "concat_1_x",
"type": "time",
"domain": {"data": "data_1", "field": "date"},
"range": [0, {"signal": "width"}],
"padding": 5
},
{
"name": "concat_1_y",
"type": "linear",
"domain": {"data": "data_1", "fields": ["price_start", "price_end"]},
"range": [{"signal": "concat_1_height"}, 0],
"nice": true,
"zero": true
}
]
}