I'm using Elasticsearch and Kibana version 7.6.1 and Vega version 4.3.0.
I added the code "tooltip":{"field":"site"} in the example code.
When I hover the mouse over the circle data of the bottom graph, tooltips open on the top graph which is wrong offset. This happens to all graphs except the top one.
The code I used is below. When I tried on Vega online editior, it seems the tooltip opens in the right offset.
{
"$schema": "https://vega.github.io/schema/vega/v4.3.0.json",
"description": "A small multiples view of barley yields by site and variety.",
"width": 200,
"padding": 5,
"signals": [
{"name": "offset", "value": 15},
{"name": "cellHeight", "value": 100},
{"name": "height", "update": "6 * (offset + cellHeight)"}
],
"data": [
{
"name": "barley",
"values":[
{"yield":27,"variety":"Manchuria","year":1931,"site":"University Farm"},
{"yield":48.86667,"variety":"Manchuria","year":1931,"site":"Waseca"},
{"yield":27.43334,"variety":"Manchuria","year":1931,"site":"Morris"},
{"yield":39.93333,"variety":"Manchuria","year":1931,"site":"Crookston"},
{"yield":32.96667,"variety":"Manchuria","year":1931,"site":"Grand Rapids"},
{"yield":43.06666,"variety":"Glabron","year":1931,"site":"University Farm"},
{"yield":55.2,"variety":"Glabron","year":1931,"site":"Waseca"},
{"yield":28.76667,"variety":"Glabron","year":1931,"site":"Morris"},
{"yield":38.13333,"variety":"Glabron","year":1931,"site":"Crookston"},
{"yield":29.13333,"variety":"Glabron","year":1931,"site":"Grand Rapids"},
{"yield":35.13333,"variety":"Svansota","year":1931,"site":"University Farm"}
]
}
],
"scales": [
{
"name": "gscale",
"type": "band",
"range": [0, {"signal": "height"}],
"round": true,
"domain": {
"data": "barley",
"field": "site",
"sort": {
"field": "yield",
"op": "median",
"order": "descending"
}
}
},
{
"name": "xscale",
"type": "linear",
"nice": true,
"range": "width",
"round": true,
"domain": {"data": "barley", "field": "yield"}
},
{
"name": "cscale",
"type": "ordinal",
"range": "category",
"domain": {"data": "barley", "field": "year"}
}
],
"axes": [
{"orient": "bottom", "scale": "xscale", "zindex": 1}
],
"legends": [
{
"stroke": "cscale",
"title": "Year",
"padding": 4,
"encode": {
"symbols": {
"enter": {
"strokeWidth": {"value": 2},
"size": {"value": 50}
}
}
}
}
],
"marks": [
{
"name": "site",
"type": "group",
"from": {
"facet": {
"data": "barley",
"name": "sites",
"groupby": "site"
}
},
"encode": {
"enter": {
"y": {"scale": "gscale", "field": "site", "offset": {"signal": "offset"}},
"height": {"signal": "cellHeight"},
"width": {"signal": "width"},
"stroke": {"value": "#ccc"}
}
},
"scales": [
{
"name": "yscale",
"type": "point",
"range": [0, {"signal": "cellHeight"}],
"padding": 1,
"round": true,
"domain": {
"data": "barley",
"field": "variety",
"sort": {
"field": "yield",
"op": "median",
"order": "descending"
}
}
}
],
"axes": [
{
"orient": "left",
"scale": "yscale",
"tickSize": 0,
"domain": false,
"grid": true,
"encode": {
"grid": {
"enter": {"strokeDash": {"value": [3,3]}}
}
}
},
{
"orient": "right",
"scale": "yscale",
"tickSize": 0,
"domain": false
}
],
"marks": [
{
"type": "symbol",
"from": {"data": "sites"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "yield"},
"y": {"scale": "yscale", "field": "variety"},
"stroke": {"scale": "cscale", "field": "year"},
"strokeWidth": {"value": 2},
"size": {"value": 50},
"tooltip":{"field":"site"}
}
}
}
]
},
{
"type": "text",
"from": {"data": "site"},
"encode": {
"enter": {
"x": {"field": "width", "mult": 0.5},
"y": {"field": "y"},
"fontSize": {"value": 11},
"fontWeight": {"value": "bold"},
"text": {"field": "datum.site"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
}