ionic-team / ionic-team/ionic-framework

bug: IonContent breaks chart libraries

Open
#30,297 0 comments 0 reactions 0 assignees View on GitHub
triage
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

I'm trying to implement a Chart library for my app. I first tried Chart.js, and now ECharts. On both, I'm experiencing bad behaviours when it is inside a `` (nested or not, problem is the same).

For Chart.js, the content managed to shows up, but with a strange animation of the chart growing from top left, like if the container was first at 0 height or width.

For ECharts, the chart will just not shows up if there is not explicit pixels width AND height.

The first workaround found was to put their init inside a setTimeout at tiny delay (it sometimes works even with a 0 delay, not sure why). Then I just tried to remove the `` container, and it fixed both.

My conclusion is: ion-content do something that I don't get, with it size, that seems to break canvas-responsive libraries.

Do you know if I can just not use the ? I do want to do a tab navigation with headers etc.

### Expected Behavior

Charts should show even if inside a which seems to be a basic container.

### Steps to Reproduce

The stackblitz shows by default a white page. Inside the `App.tsx` I added comment to explain how to test the fix. You can also try to add the chart init inside a setTimeout with a IonContent, it should also works.

### Code Reproduction URL

https://stackblitz.com/edit/p3pckzwk?file=src%2FApp.tsx

### Ionic Info
```
Ionic:

Ionic CLI : 7.2.0 (/src/node_modules/.pnpm/@ionic+cli@7.2.0/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.4.2 (/src/node_modules/.pnpm/@ionic+react@8.4.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@ionic/react)

Capacitor:

Capacitor CLI : 6.2.0
@capacitor/android : 6.2.0 (/src/node_modules/.pnpm/@capacitor+android@6.2.0_@capacitor+core@6.2.0/node_modules/@capacitor/android)
@capacitor/core : 6.2.0 (/src/node_modules/.pnpm/@capacitor+core@6.2.0/node_modules/@capacitor/core)
@capacitor/ios : 6.2.0 (/src/node_modules/.pnpm/@capacitor+ios@6.2.0_@capacitor+core@6.2.0/node_modules/@capacitor/ios)

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v20.18.1 (/usr/local/bin/node)
npm : 10.8.2
OS : Linux 6.10
```

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the StackBlitz reproduction and read the comments in src/App.tsx, then compare chart initialization inside and outside IonContent. Reproduce the Chart.js and ECharts behavior and inspect the IonContent sizing or lifecycle involved. Done means responsive charts render correctly inside IonContent without fixed pixel dimensions or a timing workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
chart.js, react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.