Vaadin Charts tooltip - overflow is hidden

Flow
1

Hi,

I got a simple Vaadin stacked column graph. My tooltip content is rather large (40-50 rows). My problem is that the part that sticks out from the chart is not visible. I have found information here on how to solve this with Highcharts:
http://stackoverflow.com/questions/10734746/highcharts-tooltip-overflow-is-hidden

I tried setting tooltip.setUseHTML(true); and added the CSS from the post above to my custom theme but that did not resolve my issue.

Can anyone help me out on how this can be resolved?

Another more favoral solution would be to have a fixed-sized tooltip which is scrollable. Is that possible with Vaadin charts and can someone point me in the right direction on how to set it up?

Best regards
Henrik

2

Quite many Vaadin components, especially layouts, have “overflow: hidden” in many of their HTML elements, so they could clip it as well. Please check the styles with Firebug or some other inspection tool. It can be some work to make all those visible, and it could have some side-effects.

It looks like also the Charts svg element has “overflow: hidden”, although that might not matter if the element enlargens to contain the tooltip…not sure how it works.

3

To work nicer with Vaadin UI, the Charts tooltips really should be managed by VOverlay in Vaadin client-side code. It could be some work to do the integration with HighCharts though.

4

Thank you for your replies!

I ended up using a fixed-sized tooltip containing a HTML table, like below (padding-right set to 20px to avoid a horizontal scrollbar whenever a vertical scrollbar is displayed):

<div style="height:300px;width:auto;overflow-y:auto;padding-right : 20px;">
  <table>
    ...
  </table>
</div>

Regards
Henrik