LineChart height not defaulting to parent container

[chrispeterson3]

Bug summary

The LineChart component states that the height of the chart will inherit the height of its parent. When wrapping the LineChart in a div with a defined height, the chart does not adjust height from within the embedded Shopify app.

Expected behavior

LineChart height would inherit height of 500px from parent div.

Actual behavior

LineChart height does not adjust.

Steps to reproduce the problem

1. Install polaris-viz
2. Wrap elements in <PolarisProvider> component
3. Wrap <LineHeight /> element with div that has defined px height

Reduced test case

Can only replicate within shopify embedded app.

The best way to get your bug fixed is to provide a reduced test case. This CodeSandbox template is a great starting point.

Specifications

• Polaris-Viz version number: 10.3.1
• Browser: Chrome Version 120.0.6099.129
• Device: Mac
• Operating System: OS 15-inch, M2, 2023

Or run npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/polaris-viz to provide specifications on your environment including version numbers, browser, device, and operating system.

Paste the results here:

[ryanrphillips]

Did you import the CSS for the Polaris Viz library?

import '@shopify/polaris-viz/build/esm/styles.css';

I missed this step and was having the same issue until I added the import.

[Duong-GM]

Did you import the CSS for the Polaris Viz library?

import '@shopify/polaris-viz/build/esm/styles.css';

I missed this step and was having the same issue until I added the import.

This works for me. Thanks man.

[Ulset]

Do you have any ideas what else could be wrong? Im importing the css but still the same issue as described above