[ngx-charts-pie-chart] shows wrong tootltip position in view

[divyanshusrivastava02]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior [ngx-charts-pie-chart] shows wrong tootltip position in view

Expected behavior Must be next to mouse or should be on highlighted element.

Reproduction of the problem I used demo link where I re-tested this issue like GO TO > https://swimlane.gitbooks.io/ngx-charts/content/charts/pie-chart.html

CHANGE VALUES "app.ts" template value to:-

<ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="single" [legend]="false" [explodeSlices]="explodeSlices" [labels]="false" [doughnut]="true" [gradient]="true" [arcWidth]=[0.40] (select)="onSelect($event)">

CHANGE "data.ts" single array value to:- export var single = [ { "name": "Germany", "value": 20 }, { "name": "USA", "value": 40 }, { "name": "France", "value": 40 } ];

My mouse position is on RED

• ngx-charts version: @latest

• Angular version: 4.x

• Browser: all

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[marjan-georgiev]

The reason it is positioned there is because the tooltip is positioned on top of the bounding rectangle of the SVG element, and in this case, that looks like this:

It is not ideal. Perhaps we can position it at the center of the element instead of the top, but that requires modifying the tooltip component.

[arsyed04]

This somehow seems fine in demo at https://swimlane.github.io/ngx-charts/#/ngx-charts/bar-horizontal

[chunhui2001]

Tooltip content position wrong if I include foundation-flex-6.3.0.min.css style framework.

How can I override Tooltip position if I used foundation-flex-6.3.0.min.css style framework.

[vijaychhajer]

Any updates on this please. Are we going to have any fix for this.

[Allexik]

+1, would be nice to have it following cursor or at least somewhere in / on the item. Or you may give a function input which would be called on hover with the element hovered and the hover event as the parameters which would return the tooltip position.