Hint position when charts used in grid systems

[dbrrt]

I've had issues with integration of Hint component for the Sunburst element, especially when I try to implement charts/graphs within Grid. The Hint are displayed, and the behavior is really weird.

Hints on the left, are most of time well displayed,
Hints on the right are display way out the range on right.

Are there any solutions to have the Hint component targeted to a specific area so it doesn't overflow the view?

[mcnuttandrew]

Hey @dbrrt, I think i know what you are saying, but would you mind posting some pics if possible?

[dbrrt]

Assuming that I'm using a grid system, native or not. This is the behavior of my Hint components nested in Sunburst component (the black rectangles are enabled dinctinctly, when I'm hovering the corresponding the area of the sunburst).

I followed step by step the Sunburst example from this repo : https://github.com/uber/react-vis/blob/master/showcase/sunbursts/sunburst-with-tooltips.js

[smilexu]

I have exact same issue

[ShadyStego]

I stumbled into the same issue, even without grid layout.

*UPDATE: Actually my issue got resolved. Apparently I didn't import the css file correctly. The symptom was very similar to the screenshot above.

[dbrrt]

@torioLuz What do you mean by I didn't import the css file correctly?
How did you import the style from react-vis?

[ShadyStego]

@dbrrt I didn't imply you didn't. I was referring to my own case and what caused the issue.

If you think this also applies to you, then to your question:

1. The easiest way is just to include a link tag in your html file.
   <link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css">

2. Or, in my particular case, since I'm using LESS, I just used an import statement.
   @import "../../node_modules/react-vis/dist/style.css"; (depends on your directory)

[dbrrt]

@torioLuz Thanks for your response, I'm importing the styles directly in my app. I'll give a try to this way to import react-vis assets.

[SimeonC]

The key to this issue is that the parent element of the <Hint> component must be position: relative so they can absolutely position correctly.
I'm manually doing the styles via CSS-in-JS so I too had the problem.

[dbrrt]

@SimeonC thanks, I'll test it

[robwise]

I found this behavior with the example as well and then randomly I thought to try just changing this:

    x: radius * Math.cos(truedAngle),
    y: radius * Math.sin(truedAngle)

to this (switching the x and y calcs):

    y: radius * Math.cos(truedAngle),
    x: radius * Math.sin(truedAngle)

See if it works for you, mine seems to be behaving correctly now. It's been too long since Trig class so I can't comment as to what the heck is truly correct but that seems to work.