Hi Team,
I'm facing issue related to tooltip visibility for multiple vertical facets in vega-lite code of kibana dashboards, I am unable to see the tooltips for below facets charts since tooltips for the lower facet charts often render offscreen or clipped. while for starting facets tooltips are visible.
Any help, example codes or recommendations would be greatly appreciated!
Thanks in advance
Below is the vega-lite code for vertical Facets which is having tooltip visibility issue.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": {
"%context%": true,
"%timefield%": "Timestamp",
"index": "xyz",
"body": {
"size": 10000,
"_source": [
"name_1",
"name_2",
"name_3",
"name_4",
]
}
},
"format": {"property": "hits.hits"}
},
"mark": {"type": "bar", "cornerRadius": 5, "tooltip": true, "size": 20},
"encoding": {
"x": {
"field": "_source.name_1",
"type": "nominal",
"axis": {
"title": "Name_1",
"labelAngle": -90,
"labelLimit": 300,
"titlePadding": 55
},
"scale": {"paddingOuter": 5}
},
"y": {
"field": "_source.name_2",
"aggregate": "mean",
"type": "quantitative",
"axis": {"title": "Name_2 "}
},
"facet": {
"field": "_source.name_3",
"type": "nominal",
"columns": 1,
"axis": {"title": " "},
"header": {"labelAngle": 0, "labelFontSize": 20},
"scale": {"paddingInner": -90}
},
"xOffset": {"field": "_source.name_4"},
"color": {"field": "_source.name_4", "legend": false},
"tooltip": [
{
"field": "_source.name_2",
"type": "quantitative",
"title": "Name_2"
},
{
"field": "_source.name_1",
"type": "nominal",
"title": "Name_1"
},
{"field": "_source.name_3", "type": "nominal", "title": "Name_3"},
]
},
"resolve": {
"axis": {"x": "independent", "y": "independent"},
"scale": {"x": "independent", "y": "independent"}
},
"config": {
"axis": {"grid": false},
"style": {"cell": {"stroke": "transparent"}},
"kibana": {
"controlsLocation": "right",
"controlsDirection": "vertical",
"hideWarnings": true,
"restoreSignalValuesOnRefresh": true,
"tooltips": {
"position": "top",
"padding": 2,
"textTruncate": false,
"renderer": "svg"
},
"renderer": "svg"
}
}
}
Below is the snippet where for the 1st and 2nd facets (graphs/charts) tooltip is visible but when it comes to 3rd facet (graph/chart) onwards the tooltip is rendering offscreen or clipping. Kindly please let me know if there are any solutions to make the tooltip visible for all the facets.
