Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

CssImport when using Component Exporter by Mikhail Shabarov, 1 month ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

Vaadin charts tooltip overflow

Patrick Engl
5 years ago Sep 09, 2016 12:14pm

Hi,

I'm currently evaluating Vaadin Charts. One restriction I encountered is that tooltips are confined to the chart area (since they are svg elements). Are there any workarounds to show tooltips that are larger than the actual chart? 

Olli Tietäväinen
5 years ago Sep 09, 2016 12:29pm

Hi,

The Tooltip class has the property useHTML, which makes it use HTML to render instead of SVG. Maybe you can get somewhere with that?

Hope this helps,
Olli

Patrick Engl
5 years ago Sep 09, 2016 1:40pm

Hi Olli,

as far as I can tell useHTML merely allows me to use html to define the content of the tooltip, it does not change the fact that the tooltip is made up of svg elements and it is therefore confined to the chart area.

Tatu Lund
5 years ago Sep 09, 2016 1:46pm

This limitation is my experience also.
 

Guillermo Alvarez
5 years ago Sep 14, 2016 5:42pm

Hi Patrick,

I did a small test adding the following css to my app theme:

.vaadin-chart > svg{
    overflow:visible;
  }
  .highcharts-container{
    overflow:visible !important;
  }

And it seems to be working as in the attached example. I haven't seen any side effect of having this css rules so far but I didn't have time to test a lot either.

Hope this helps,

Guille