polaris_viz_tooltip_root position issue

[Zwyx]

Bug summary

Hi, I'm using a LineChart in the Shopify App Remix template, and the chart's tooltip isn't placed correctly:

Expected behavior

The tooltip should be on the chart.

Actual behavior

The tooltip is on the bottom left of the iframe, cut in half.

Steps to reproduce the problem

1. Add Polaris Viz to an app made with the Shopify App Remix template (which isn't trivial, see here)
2. Add a LineChart

Specifications

• Polaris-Viz version number: 9.13.0
• Browser: Chrome 117
• Device: Laptop
• Operating System: Ubuntu 22.04

[Zwyx]

Hey @paambaati, glad you also got Polaris Viz working in your Remix app 😉 (over there: #1425 (comment)).

I'd be interested to know if you're also experiencing this issue with the chart tooltip?

[paambaati]

@Zwyx Unfortunately I do not have the need for tooltips (at least for now), so I haven't run into this issue yet.

[Zwyx]

No worries, thanks for replying!

[Darshan562]

Hey @paambaati, glad you also got Polaris Viz working in your Remix app 😉 (over there: #1425 (comment)).

I'd be interested to know if you're also experiencing this issue with the chart tooltip?

I face same issue when i use polaris-viz library in my shopify-remix app. then after i use rechrts for better ui.

[FlorianWueest]

Got the same issue with a Donut Chart. The tooltip and the text is placed on the lower left hand corner. Also, the styling is off.

[HarshaKDeltaX]

Hey @Zwyx, Were you able to solve the issue with the tooltip? Even I'm facing the same issue with the tooltip position.

[Zwyx]

No, so I stopped using Polaris Viz. I use Tremor now.

[ajayelsner]

If you guys are still facing the same problem just use the below solution to resolve your problem.
Just copy/paste the below CSS in your application:

div#polaris_viz_tooltip_root {
position: fixed;
width: auto;
z-index: 99999999999999999;
top: 0;
}
div#polaris_viz_tooltip_root ._Title_gk0ma_1,div#polaris_viz_tooltip_root ._Series_1mcj1_1{
padding: 5px;
}

div#polaris_viz_tooltip_root ._Container_no9uw_1{
max-width:100% !important;
}

[dochithanh2002]

Hi @ajayelsner
Can you explain more about how you do that ?
Thank you so much.

[ComicDansMS]

Hi @ajayelsner Can you explain more about how you do that ? Thank you so much.

What @ajayelsner has done most likely won't for others. The selector being used is either randomly generated (not entirely sure how the build process works) or only for a particular component that matches the numbers and letters of that class name. You can use the following CSS to hide the tooltip while things are still broken:

#polaris_viz_tooltip_root,
#polaris_viz_tooltip_root * {
  display: none !important;
}

There seem to be a bunch of issues all relating to styles not being applied, so I think this is likely the root cause for the tooltip and more.

For example, there is an issue with the legend buttons only having some styles applied. They have the correct background colour (when compared to Shopify's analytics charts), but they contain the default button element border. Another one is the container that these legend buttons live in has justify-content and flex-direction properties, but no display: flex property.

Hopefully it turns out to be a quick fix.

[dochithanh2002]

Hi everyone, I found the solution for this issue!

This probliem occured basically when remix template is applied with polaris-viz library. The following line will not work using remix:
import '@shopify/polaris-viz/build/esm/styles.css';
This is why the css cannot be applied and render inside the charts. To fix this, we have to import css through link
Assume you want to create a chart in app.check.js, the following approach may be used:

In app.check.js

import styles from "@shopify/polaris-viz/build/esm/styles.css";
//
export const links = () => [{ rel: "stylesheet", href: styles }];

Ref: https://remix.run/docs/en/main/styling/css

[ComicDansMS]

And just like that, all of our problems disappear! Thank's a lot @dochithanh2002. I can't believe we missed such a basic fix haha.

[Zwyx]

Well done 👏

I don't plan to be using this library again (I have a feeling it's being neglected by Shopify, as it took three months for someone to figure out how to make it work with the new Remix app template; there are also other issues that aren't being addressed), so I'm happy for someone at Shopify to take ownership of this issue. I believe it should at least lead to a change of documentation.

[ComicDansMS]

I don't plan to be using this library again (I have a feeling it's being neglected by Shopify...)

@Zwyx I have mixed feelings about this too. Part of me wants to ditch it as I don't feel great about using it in production, but the other part of me wants to use the Polaris design system as pushed by Shopify for continuity sake across the Shopify admin. Graphs and analytics are such a huge part of Shopify, and justifying why merchants should keep your app installed, so it's surprising to see such neglect of a key component.

[ngohoanglong]

add this below your chart, it worked to me

 <div id="polaris_viz_tooltip_root" style={{
        position: 'fixed',
        top: 0,
        left: 0,
        pointerEvents: 'none',
        transition: 'opacity 0.2s ease-in-out',
        zIndex: 1000,
      }}></div>