# Kibana Vega boxplot tooltip appears at wrong positions

**URL:** <https://discuss.elastic.co/t/kibana-vega-boxplot-tooltip-appears-at-wrong-positions/235464>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [June 3, 2020, 5:08am UTC](https://discuss.elastic.co/t/kibana-vega-boxplot-tooltip-appears-at-wrong-positions/235464 "2020-06-03T05:08:27Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nani\_20](https://avatars.discourse-cdn.com/v4/letter/n/4491bb/32.png) [@Nani\_20](https://discuss.elastic.co/u/Nani_20)\
**Post date:** [June 3, 2020, 5:08am UTC](https://discuss.elastic.co/t/kibana-vega-boxplot-tooltip-appears-at-wrong-positions/235464/1 "2020-06-03T05:08:27Z")

</div>

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.

 ![Screenshot 2020-06-03 at 10.35.20 AM](https://us1.discourse-cdn.com/elastic/original/3X/0/d/0def717c594ae567483411e5cb2f249887d01747.png)

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

---

<div class="post-metadata">

**Author:** ![nyuriks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nyuriks/32/26171_2.png) [@nyuriks](https://discuss.elastic.co/u/nyuriks)\
**Post date:** [June 3, 2020, 3:37pm UTC](https://discuss.elastic.co/t/kibana-vega-boxplot-tooltip-appears-at-wrong-positions/235464/2 "2020-06-03T15:37:53Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![Nani\_20](https://avatars.discourse-cdn.com/v4/letter/n/4491bb/32.png) [@Nani\_20](https://discuss.elastic.co/u/Nani_20)\
**Post date:** [June 3, 2020, 5:41pm UTC](https://discuss.elastic.co/t/kibana-vega-boxplot-tooltip-appears-at-wrong-positions/235464/3 "2020-06-03T17:41:29Z")

</div>

@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. 😕

---

<div class="post-metadata">

**Author:** ![nyuriks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nyuriks/32/26171_2.png) [@nyuriks](https://discuss.elastic.co/u/nyuriks)\
**Post date:** [June 3, 2020, 9:46pm UTC](https://discuss.elastic.co/t/kibana-vega-boxplot-tooltip-appears-at-wrong-positions/235464/4 "2020-06-03T21:46:17Z")

</div>

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](https://gist.github.com/nyurik/736c34970ba3c32f3fe3d45d66719b3e) ? Thx!

---

<div class="post-metadata">

**Author:** ![Nani\_20](https://avatars.discourse-cdn.com/v4/letter/n/4491bb/32.png) [@Nani\_20](https://discuss.elastic.co/u/Nani_20)\
**Post date:** [June 7, 2020, 7:08pm UTC](https://discuss.elastic.co/t/kibana-vega-boxplot-tooltip-appears-at-wrong-positions/235464/5 "2020-06-07T19:08:43Z")

</div>

@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](https://vega.github.io/schema/vega/v3.json%22,%22signals%22:%5B%7B%22name%22:%22fields%22%7D,%7B%22name%22:%22plotWidth%22,%22value%22:100%7D%5D,%22data%22:%5B%7B%22name%22:%22results%22,%22format%22:%7B%22property%22:%22aggregations.times_by_week.buckets%22%7D,%22transform%22:%5B%7B%22type%22:%22formula%22,%22expr%22:%22datum.Login_time_quantile.values%5B'25.0'%5D%22,%22as%22:%22q1%22%7D,%7B%22type%22:%22formula%22,%22expr%22:%22datum.Login_time_quantile.values%5B'50.0'%5D%22,%22as%22:%22median%22%7D,%7B%22type%22:%22formula%22,%22expr%22:%22datum.Login_time_quantile.values%5B'75.0'%5D%22,%22as%22:%22q3%22%7D,%7B%22type%22:%22formula%22,%22expr%22:%22datum.min_value.value%22,%22as%22:%22min_value%22%7D,%7B%22type%22:%22formula%22,%22expr%22:%22datum.max_value.value%22,%22as%22:%22max_value%22%7D,%7B%22type%22:%22fold%22,%22fields%22:%5B%22min_value%22,%22q1%22,%22median%22,%22q3%22,%22max_value%22%5D,%22as%22:%5B%22metric%22,%22metricValue%22%5D%7D%5D,%22values%22:%7B%22took%22:33,%22timed_out%22:false,%22_shards%22:%7B%22total%22:1,%22successful%22:1,%22skipped%22:0,%22failed%22:0%7D,%22hits%22:%7B%22total%22:%7B%22value%22:10000,%22relation%22:%22gte%22%7D,%22max_score%22:null,%22hits%22:%5B%5D%7D,%22aggregations%22:%7B%22times_by_week%22:%7B%22buckets%22:%5B%7B%22key_as_string%22:%222020-05-04%22,%22key%22:1588550400000,%22doc_count%22:599,%22Login_time_quantile%22:%7B%22values%22:%7B%2225.0%22:79.97899627685547,%2250.0%22:79.97899627685547,%2275.0%22:79.97899627685547%7D%7D,%22q1%22:79.97899627685547,%22median%22:79.97899627685547,%22q3%22:79.97899627685547%7D,%7B%22key_as_string%22:%222020-05-11%22,%22key%22:1589155200000,%22doc_count%22:68132,%22Login_time_quantile%22:%7B%22values%22:%7B%2225.0%22:128.31574821472168,%2250.0%22:247.2830047607422,%2275.0%22:387.5187454223633%7D%7D,%22q1%22:128.31574821472168,%22median%22:247.2830047607422,%22q3%22:387.5187454223633%7D,%7B%22key_as_string%22:%222020-05-18%22,%22key%22:1589760000000,%22doc_count%22:18959,%22Login_time_quantile%22:%7B%22values%22:%7B%2225.0%22:119.23575210571289,%2250.0%22:217.27499389648438,%2275.0%22:457.4552536010742%7D%7D,%22q1%22:119.23575210571289,%22median%22:217.27499389648438,%22q3%22:457.4552536010742%7D%5D%7D%7D%7D%7D%5D,%22scales%22:%5B%7B%22name%22:%22layout%22,%22type%22:%22band%22,%22range%22:%22height%22,%22domain%22:%7B%22data%22:%22results%22,%22field%22:%22key_as_string%22%7D%7D,%7B%22name%22:%22xscale%22,%22type%22:%22linear%22,%22range%22:%22width%22,%22round%22:true,%22domain%22:%7B%22data%22:%22results%22,%22field%22:%22metricValue%22%7D,%22zero%22:true,%22nice%22:true%7D,%7B%22name%22:%22color%22,%22type%22:%22ordinal%22,%22range%22:%22category%22%7D%5D,%22axes%22:%5B%7B%22orient%22:%22bottom%22,%22scale%22:%22xscale%22,%22zindex%22:1,%22title%22:%22Time)(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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [July 5, 2020, 7:08pm UTC](https://discuss.elastic.co/t/kibana-vega-boxplot-tooltip-appears-at-wrong-positions/235464/6 "2020-07-05T19:08:56Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.
