Hello,
I'm using version 8.6.0 in elastic cloud.
I would like to know what I can do so that the tooltip is in the correct position. I noticed that this bug often happens when I use a mark of type group. The code below is just an example of the reported issue.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 120,
"autosize": {"type": "none"},
"padding": {"left": 20, "top": 5, "right": 20, "bottom": 5},
"signals": [
{"name": "offset_chart", "update": "30"},
{"name": "pie_size", "update": "100"}
],
"data": [
{
"name": "table",
"values": [
{"id": 1, "field": 4, "percentage": 0.2},
{"id": 2, "field": 6, "percentage": 0.3},
{"id": 3, "field": 10, "percentage": 0.5}
]
},
{
"name": "pie_data",
"source": "table",
"transform": [
{
"type": "pie",
"field": "field"
}
]
}
],
"marks": [
{
"type": "group",
"encode": {
"update": {
"y": {"value": 0},
"x": {"value": 0},
"height": {"signal": "height"},
"width": {"signal": "pie_size"}
}
},
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": {"data": "table", "field": "id"},
"range": {"scheme": "category20"}
}
],
"marks": [
{
"type": "arc",
"from": {"data": "pie_data"},
"encode": {
"enter": {
"fill": {"scale": "color", "field": "id"}
},
"update": {
"x": {"signal": "pie_size/2"},
"y": {"signal": "height/2"},
"startAngle": {"field": "startAngle"},
"endAngle": {"field": "endAngle"},
"innerRadius": {"signal": "pie_size/2*0.7"},
"outerRadius": {"signal": "pie_size/2"}
}
}
}
]
},
{
"type": "group",
"encode": {
"update": {
"y": {"value": 0},
"x": {"signal": "pie_size+offset_chart"},
"height": {"signal": "height"},
"width": {"signal": "width-offset_chart-pie_size"}
}
},
"marks": [
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "left"},
"baseline": {"value": "middle"},
"fill": {"value": "#404040"},
"tooltip": [
{"signal": "'Description id 1'"}
]
},
"update": {
"x": {"value": 4},
"y": {"signal": "height/4"},
"text": {"value": "Title id 1:"},
"fontSize": {"signal": "20"},
"opacity": {"value": 1}
},
"hover": {
"opacity": {"value": 0.7}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "left"},
"baseline": {"value": "middle"},
"fill": {"value": "#404040"},
"tooltip": [
{"signal": "'Description id 2'"}
]
},
"update": {
"x": {"value": 4},
"y": {"signal": "2*height/4"},
"text": {"value": "Title id 2:"},
"fontSize": {"signal": "20"},
"opacity": {"value": 1}
},
"hover": {
"opacity": {"value": 0.7}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "left"},
"baseline": {"value": "middle"},
"fill": {"value": "#404040"},
"tooltip": [
{"signal": "'Description id 3'"}
]
},
"update": {
"x": {"value": 4},
"y": {"signal": "3*height/4"},
"text": {"value": "Title id 3:"},
"fontSize": {"signal": "20"},
"opacity": {"value": 1}
},
"hover": {
"opacity": {"value": 0.7}
}
}
},
{
"type": "text",
"name": "eligible_value",
"from": {"data": "table"},
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "middle"},
"fill": {"value": "#404040"},
"tooltip": {"signal": "{'Percentage': format(datum.percentage,'.1%')}"}
},
"update": {
"x": {"signal": "(width-offset_chart-pie_size)*0.9"},
"y": {"signal": "datum.id*height/4"},
"text": {"signal": "datum.field"},
"fontSize": {"signal": "20"},
"opacity": {"value": 1}
},
"hover": {
"opacity": {"value": 0.7}
}
}
}
]
}
]
}
I don't understand why the title tooltip is in the correct position (Figure 1) and the value is not (Figure 2).
Figure 1:
Figure2:
This example is not too far away, but there are cases where the tooltip does not even appear.