search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.28k stars 1.15k forks source link

Tooltip is clipped after animation ends #1576

Open ChristianKohler opened 3 years ago

ChristianKohler commented 3 years ago

Describe the bug Tooltip is clipped after animation ends. See gif, right part of the tooltip

Screen Recording 2021-02-09 at 14 47 38

To Reproduce Steps to reproduce the behavior:

  1. Go to 'https://swimlane.github.io/ngx-charts/#/ngx-charts/bar-vertical'
  2. Hover over a bar
  3. Wait for the tooltip to appear
  4. See that the tooltip gets clipped

Expected behavior Should not clip

Screenshots See gif above

Demo https://swimlane.github.io/ngx-charts/#/ngx-charts/bar-vertical

ngx-charts version 17.0.0

Additional context Tested on latest Chrome

ChristianKohler commented 3 years ago

It looks like it is caused by the .animation class adding a transform:

https://github.com/swimlane/ngx-charts/blob/dde133ed0e91474299c9eeec7be859a40d2d5c6e/projects/swimlane/ngx-charts/src/lib/common/tooltip/tooltip.component.scss#L142

ChristianKohler commented 3 years ago

Futher note: In the bar-vertical example it only is a problem on the "UK" bar. All the other tooltips work. We have a similar behaviour in our application. The tooltip works for some bar and has the clipping issue for other. Also interesting is, that when I resize the window some tooltip work again and some other break. Maybe a rounding issue? 🤔