Kibana Vega boxplot tooltip appears at wrong positions

[Nani_20]

Hi,
I am trying to draw box plots in Kibana using Vega. To indicate a few values(min, median, max), I have added a few points using symbol Mark and configured tooltip for these points.

But, the tooltip appears on the top of the chart for all the points. Please find below the screenshot of the same.

Is there any way to change the tooltip position? Thanks in advance

[nyuriks (Yuri Astrakhan)]

One thing you definitely should do is move all "enter" items into "update" -- not sure if this is related to your issue, but you might have other bugs from it.

That said, https://github.com/elastic/kibana/pull/30795 was one of the related patches fixing tooltip positioning that was applied to many versions. Please check if your version matches those it was applied to.

[Nani_20]

@nyuriks Thanks for the response. I am using Kibana 7.6.2. I see that the latest fix was for 6.7.
Do I need to port to older version? That might affect other parts of my dashboard I guess. Correct me if I am wrong here.

I guess I should live with this than messing up my dashboard.

[nyuriks (Yuri Astrakhan)]

newer versions should also include that fix. Strange - i haven't heard anyone reporting any tooltip issues as of late. Can you post your code using https://gist.github.com/nyurik/736c34970ba3c32f3fe3d45d66719b3e ? Thx!

[Nani_20]

@nyuriks Find below the requested result from the console.

"{"$schema":"https://vega.github.io/schema/vega/v3.json","signals":[{"name":"fields"},{"name":"plotWidth","value":100}],"data":[{"name":"results","format":{"property":"aggregations.times_by_week.buckets"},"transform":[{"type":"formula","expr":"datum.Login_time_quantile.values['25.0']","as":"q1"},{"type":"formula","expr":"datum.Login_time_quantile.values['50.0']","as":"median"},{"type":"formula","expr":"datum.Login_time_quantile.values['75.0']","as":"q3"},{"type":"formula","expr":"datum.min_value.value","as":"min_value"},{"type":"formula","expr":"datum.max_value.value","as":"max_value"},{"type":"fold","fields":["min_value","q1","median","q3","max_value"],"as":["metric","metricValue"]}],"values":{"took":33,"timed_out":false,"_shards":{"total":1,"successful":1,"skipped":0,"failed":0},"hits":{"total":{"value":10000,"relation":"gte"},"max_score":null,"hits":[]},"aggregations":{"times_by_week":{"buckets":[{"key_as_string":"2020-05-04","key":1588550400000,"doc_count":599,"Login_time_quantile":{"values":{"25.0":79.97899627685547,"50.0":79.97899627685547,"75.0":79.97899627685547}},"q1":79.97899627685547,"median":79.97899627685547,"q3":79.97899627685547},{"key_as_string":"2020-05-11","key":1589155200000,"doc_count":68132,"Login_time_quantile":{"values":{"25.0":128.31574821472168,"50.0":247.2830047607422,"75.0":387.5187454223633}},"q1":128.31574821472168,"median":247.2830047607422,"q3":387.5187454223633},{"key_as_string":"2020-05-18","key":1589760000000,"doc_count":18959,"Login_time_quantile":{"values":{"25.0":119.23575210571289,"50.0":217.27499389648438,"75.0":457.4552536010742}},"q1":119.23575210571289,"median":217.27499389648438,"q3":457.4552536010742}]}}}}],"scales":[{"name":"layout","type":"band","range":"height","domain":{"data":"results","field":"key_as_string"}},{"name":"xscale","type":"linear","range":"width","round":true,"domain":{"data":"results","field":"metricValue"},"zero":true,"nice":true},{"name":"color","type":"ordinal","range":"category"}],"axes":[{"orient":"bottom","scale":"xscale","zindex":1,"title":"Time(in seconds)","titleFontSize":15},{"orient":"left","scale":"layout","tickCount":20,"zindex":1,"title":"Weeks","titleFontSize":15}],"marks":[{"type":"group","from":{"facet":{"data":"results","name":"times","groupby":"key_as_string"}},"encode":{"update":{"yc":{"scale":"layout","field":"key_as_string","band":0.5},"height":{"signal":"plotWidth"}}},"data":[{"name":"summary","source":"times","transform":[{"type":"aggregate","fields":["metricValue","metricValue","metricValue","metricValue","metricValue"],"ops":["min","q1","median","q3","max"],"as":["min","q1","median","q3","max"]}]}],"marks":[{"type":"rect","from":{"data":"summary"},"encode":{"update":{"fill":{"value":"steelblue"},"cornerRadius":{"value":4},"yc":{"signal":"plotWidth / 2"},"height":{"signal":"plotWidth / 4"},"x":{"scale":"xscale","field":"q1"},"x2":{"scale":"xscale","field":"q3"}}}},{"type":"rect","from":{"data":"summary"},"encode":{"update":{"fill":{"value":"aliceblue"},"width":{"value":2},"yc":{"signal":"plotWidth/2"},"height":{"signal":"plotWidth/2"},"x":{"scale":"xscale","field":"median"}}}},{"type":"rect","from":{"data":"summary"},"encode":{"update":{"fill":{"value":"black"},"height":{"value":1},"yc":{"signal":"plotWidth/2","offset":-0.5},"x":{"scale":"xscale","field":"min"},"x2":{"scale":"xscale","field":"max"}}}},{"type":"rect","from":{"data":"summary"},"encode":{"update":{"fill":{"value":"black"},"width":{"value":2},"yc":{"signal":"plotWidth/2"},"height":{"signal":"plotWidth/4"},"x":{"scale":"xscale","field":"min"}}}},{"type":"rect","from":{"data":"summary"},"encode":{"update":{"fill":{"value":"black"},"width":{"value":2},"yc":{"signal":"plotWidth/2"},"height":{"signal":"plotWidth/4"},"x":{"scale":"xscale","field":"max"}}}},{"type":"symbol","from":{"data":"summary"},"encode":{"update":{"fill":{"value":"#e60b1e"},"size":{"value":40},"stroke":{"value":"#652c90"},"x":{"scale":"xscale","offset":1,"field":"min"},"yc":{"signal":"plotWidth/2"},"tooltip":{"signal":"{'Min': format(datum.min, '0.2f')}"}}}},{"type":"symbol","from":{"data":"summary"},"encode":{"update":{"fill":{"value":"#e60b1e"},"size":{"value":40},"stroke":{"value":"#652c90"},"x":{"scale":"xscale","offset":1,"field":"median"},"yc":{"signal":"plotWidth/2"},"tooltip":{"signal":"{'Median': format(datum.median, '0.2f')}"}}}},{"type":"symbol","from":{"data":"summary"},"encode":{"update":{"size":{"value":40},"fill":{"value":"#e60b1e"},"stroke":{"value":"#652c90"},"x":{"scale":"xscale","offset":1,"field":"max"},"yc":{"signal":"plotWidth/2"},"tooltip":{"signal":"{'Max': format(datum.max, '0.2f')}"}}}}]}],"config":{"range":{"category":{"scheme":"elastic"}},"arc":{"fill":"#54B399"},"area":{"fill":"#54B399"},"line":{"stroke":"#54B399"},"path":{"stroke":"#54B399"},"rect":{"fill":"#54B399"},"rule":{"stroke":"#54B399"},"shape":{"stroke":"#54B399"},"symbol":{"fill":"#54B399"},"trail":{"fill":"#54B399"}},"autosize":{"type":"fit","contains":"padding"}}"
11[Violation] 'setTimeout' handler took ms

Believe this helps in resolving the issue. Let me know if you need anything else.
Thanks in advance