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

[GayatriK2002]

💡 What is the current behavior?

• ECharts integrations in React, HTML, and Angular standalone environments occasionally experienced delayed or incomplete chart rendering on initial load, often requiring user intervention (e.g., resize, theme change) for proper display.

GitHub Issue Number: #
Jira Issue Number: 4269

🆕 What is the new behavior?

• A new entry has been added to the FAQ section of iX-docs to provide comprehensive guidance and troubleshooting for optimal chart rendering.

👨‍💻 Help & support

[gemini-code-assist]

Code Review

This pull request adds a new 'Chart rendering and troubleshooting' section to the FAQ documentation, addressing common Apache ECharts rendering issues, hidden container behaviors, and framework-specific recommendations. The review feedback highlights several style guide violations across the new content, specifically pointing out the need for sentence case in bullet points, avoiding Oxford commas, using 'e.g.' instead of 'for example' or 'such as', and applying correct contractions and apostrophes (using the U+2019 right single quotation mark).

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Several style guide violations were found in this section:

1. Sentence Case: Bullet points should start with a capital letter (e.g., 'The').
2. Contractions: Use 'isn’t' instead of 'is not', and ensure you use the right single quotation mark (U+2019) ’ instead of a standard apostrophe.

Suggested change

	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 is not met, the chart may render blank or incorrectly.
	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.

References

1. Use sentence case always: Start with a big letter and then only proper nouns are capitalized. ^(link)
2. Use 'don’t', 'isn’t', 'haven’t' and 'aren’t' instead of 'do not', 'is not', 'have not' and 'are not'. ^(link)
3. Apostrophe: Always use the symbol ’ (U+2019, 'right single quotation mark'), not ' ^(link)

[GayatriK2002]

Updated

[gemini-code-assist]

Several style guide violations were found in this section:

1. Oxford Comma: Avoid the Oxford comma before 'and' and 'or' (e.g., 'modals or hidden containers', 'React, Angular and plain HTML').
2. Abbreviation: Use 'e.g.' instead of 'for example'.
3. Sentence Case: Bullet points should start with a capital letter.

Suggested change

	<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 (for example 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="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>

References

1. Avoid oxford comma whenever possible, e.g. before 'and' and 'or'. ^(link)
2. Use 'e.g.' instead of 'for example', 'such as' or 'like'. ^(link)
3. Use sentence case always: Start with a big letter and then only proper nouns are capitalized. ^(link)

[GayatriK2002]

Updated

[gemini-code-assist]

Several style guide violations were found in this section:

1. Oxford Comma: Avoid the Oxford comma before 'and' and 'or' (e.g., 'React, Angular and HTML').
2. Abbreviation: Use 'e.g.' instead of 'such as'.
3. Sentence Case: Bullet points should start with a capital letter.

Suggested change

	<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 such as `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>
	<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>

References

1. Avoid oxford comma whenever possible, e.g. before 'and' and 'or'. ^(link)
2. Use 'e.g.' instead of 'for example', 'such as' or 'like'. ^(link)
3. Use sentence case always: Start with a big letter and then only proper nouns are capitalized. ^(link)

[GayatriK2002]

Updated

[netlify]

👷 Deploy request for industrial-experience pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	c876677