diff --git a/docs/home/support/faq.md b/docs/home/support/faq.md index 590eb9545..41102373c 100644 --- a/docs/home/support/faq.md +++ b/docs/home/support/faq.md @@ -149,4 +149,39 @@ The Siemens Industrial Experience design team provides a transparent versioning 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. + + +
+## Chart rendering and troubleshooting +
+ + +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. + + + +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 + + + +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). \ No newline at end of file