Skip to content

fix(echarts): added FAQ section for charts loading issue #251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
GayatriK2002 wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

fix(echarts): added FAQ section for charts loading issue #251

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f73c53
added FAQ section for echarts loading issue
GayatriK2002 Jun 10, 2026
c876677
updated according to review comments
GayatriK2002 Jun 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions docs/home/support/faq.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,4 +149,39 @@ The Siemens Industrial Experience design team provides a transparent versioning

<Accordion title="Can I use the design system to build my documentation?" id="docu-theme" showBorderBottom>
The Siemens Industrial Experience design system is intended for building industrial applications. If you are a Siemens AG employee looking to create a documentation website, use the [official MkDocs theme](https://code.siemens.com/code-ops/docs-theme) for documentation purposes. This ensures consistency and alignment with Siemens documentation standards.
</Accordion>

<div className="h2-faq">
## Chart rendering and troubleshooting
</div>

<Accordion title="Why is my ECharts chart not displayed on first render?" id="echarts-first-render">
This usually happens when ECharts is initialized before the chart container has a valid size. Based on the official Apache ECharts FAQ, verify the following first:

- `echarts.js` is loaded correctly
- The `echarts` variable exists
- The DOM container has a width and height when `echarts.init(...)` is called

If any of these conditions isn't met, the chart may render blank or incorrectly.
</Accordion>

<Accordion title="Why does chart loading issue happen in application frames, tabs, modals or hidden containers?" id="echarts-hidden-container">
If the chart container is hidden (e.g. in collapsed panes, tabs, modals or parts of an application frame), ECharts cannot read proper layout dimensions during initialization. This can affect React, Angular and plain HTML integrations equally.

Use one of these approaches:

- Initialize the chart only after the container becomes visible
- Set explicit container dimensions (`style.width` and `style.height`) before init
- Call `chart.resize()` after the container is shown
</Accordion>

<Accordion title="Are there framework-specific recommendations for React, Angular and HTML?" id="echarts-framework-guidance" showBorderBottom>
Yes. The same sizing principle applies everywhere, including wrappers e.g. `echarts-for-react`.

- **React (including `echarts-for-react`)**: Ensure parent/container dimensions are stable before mounting; trigger `resize()` after layout changes
- **Angular**: Initialize in a lifecycle stage where container size is available, and call `resize()` when visibility or layout changes
- **Plain HTML/JavaScript**: Confirm script load order and container dimensions before `echarts.init(...)`
- **SSR**: Set width and height explicitly via `opts.width` and `opts.height`

For details, see the official docs: [Apache ECharts FAQ](https://echarts.apache.org/en/faq.html) and [Apache ECharts API](https://echarts.apache.org/en/api.html#echarts).
</Accordion>
Loading