[Raman-Katiyar]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Fixes getConnectedDataURL throwing a TypeError when the connected charts use the SVG renderer.

Fixed issues

• Fixes [Bug] cannot export two connected charts with svg renderer / getConnectedDataURL broken with SVG renderer #19278: getConnectedDataURL broken with SVG renderer (TypeError: Cannot set properties of undefined (setting 'innerHTML'))

Details

Before: What was the problem?

With two SVG-rendered charts connected via echarts.connect(), calling chart.getConnectedDataURL({type: 'svg'}) threw:

TypeError: Cannot set properties of undefined (setting 'innerHTML')
    at src/core/echarts.ts:1080 in getConnectedDataURL

Reproduction:

const chart1 = echarts.init(dom1, null, {renderer: 'svg'});
const chart2 = echarts.init(dom2, null, {renderer: 'svg'});
chart1.setOption({/* ... */});
chart2.setOption({/* ... */});
echarts.connect([chart1, chart2]);
chart1.getConnectedDataURL({type: 'svg'}); // throws

Root cause: in the SVG branch of getConnectedDataURL, a throwaway zrender instance is created and resized, but never painted before getSvgRoot().innerHTML is written. In zrender's SVG painter, getSvgRoot() returns this._mainVNode.elm, and _mainVNode is only created inside renderToVNode(), which only runs on paint — so getSvgRoot() returned undefined and the assignment threw.

A second, related problem: even if the root existed, the old code finished with toDataURL(), which re-renders from the (empty) display list of the throwaway instance — so the injected <g> content would have been dropped from the output.

After: How does it behave after the fixing?

getConnectedDataURL({type: 'svg'}) now returns a valid data:image/svg+xml;charset=UTF-8,... URL containing both connected charts, with the correct combined geometry and the requested connectedBackgroundColor.

The fix, all inside the SVG branch of getConnectedDataURL (src/core/echarts.ts):

1. setBackgroundColor is applied first, then zr.refreshImmediately() is called before writing getSvgRoot().innerHTML, so the painter's root <g> element exists.
2. Instead of toDataURL() (which would re-render from the empty display list and drop the injected content), the composed svg element is serialized directly via getSvgDom().outerHTML.
3. The positioning style refresh() leaves on the root element is removed, and viewBox is set explicitly, so the export matches a plain renderToSVGString() output. (Removing the attribute from this detached svg element can still leave a stale empty style="" behind in the serialized string in some browsers, so that is stripped from the string as well.)

No zrender changes are needed — the bug is entirely in how ECharts drives the throwaway instance.

Regression test

New test: test/ut/spec/api/getConnectedDataURL.test.ts — two SVG bar charts, echarts.connect(), then getConnectedDataURL({type: 'svg'}); asserts a data:image/svg+xml URL whose decoded svg contains <svg/</svg> and both chart titles (so the test fails if the content is lost, not just if it throws). A second test covers connectedBackgroundColor: '#ff0000'.

Fail-before (on master, before the fix — Node 14, npx jest --config test/ut/jest.config.cjs test/ut/spec/api/getConnectedDataURL.test.ts --no-coverage):

✕ svg renderer should export two connected charts without throwing
✕ svg renderer should apply connectedBackgroundColor
Tests: 2 failed, 2 total
TypeError: Cannot set property 'innerHTML' of undefined
    at src/core/echarts.ts:1080 in getConnectedDataURL

Pass-after (same command, after the fix):

✓ svg renderer should export two connected charts without throwing
✓ svg renderer should apply connectedBackgroundColor
Tests: 2 passed, 2 total

Validation

• Real-browser geometry check (headless Chrome 157, dist built with npm run build:lib + node build/build.js --type all): two 400×300 SVG charts at x=10 and x=430, connectedBackgroundColor: '#ff0000'. Exported svg: root <svg ... width="820" height="300" viewBox="0 0 820 300"> (no stray style attribute), 2 translate wrappers translate(0,0) and translate(420,0) (exactly right), both titles present, red background rect present. Rendered as an <img>, the export shows both bar charts side by side with correct bar heights (10/20 against a 0–20 axis, 30/40 against a 0–40 axis). Note: jsdom's getBoundingClientRect returns zeros, so this geometry check was done in a real browser rather than in Jest.
• Type-check: npm run checktype — exit 0.
• Lint: npx eslint src/core/echarts.ts test/ut/spec/api/getConnectedDataURL.test.ts — exit 0, no warnings.
• Broader api suite: npx jest --config test/ut/jest.config.cjs test/ut/spec/api --no-coverage — 4 suites passed, 12 tests passed, 0 failures (no regressions in getVisual, containPixel, converter).
• Diff scope: exactly 2 files — src/core/echarts.ts (+23/−3) and the new test file (+104). No dist/ changes (restored before commit, per repo convention).

Document Info

One of the following should be checked.

• This PR doesn't relate to document changes
• The document should be updated later
• The document changes have been made in apache/echarts-doc#xxx

Misc

Security Checking

• This PR uses security-sensitive Web APIs.

ZRender Changes

• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

test/ut/spec/api/getConnectedDataURL.test.ts (new, see above).

Merging options

• Please squash the commits into a single one when merging.

Other information

• The innerHTML assignment on the throwaway svg root pre-dates this PR; no new security-sensitive API is introduced (the change only reorders the existing calls and serializes the composed element instead of re-rendering).
• No competing PR for [Bug] cannot export two connected charts with svg renderer / getConnectedDataURL broken with SVG renderer #19278 exists: issue [Bug] cannot export two connected charts with svg renderer / getConnectedDataURL broken with SVG renderer #19278 is still open, and the only PR referencing it is fix(core): makes the opts argument of echartsInstance.getConnectedDataURL optional #21736 (closed/merged 14 Sep 2026, "makes the opts argument of echartsInstance.getConnectedDataURL optional") — a different, adjacent fix; the crash persists on master.
• @Ovilia — could you please review when you have a moment? (External contributors cannot use the Reviewers control on this repo, so mentioning here instead.)

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Please DO NOT commit the files in dist, i18n, and ssr/client/dist folders in a non-release pull request. These folders are for release use only.