Save as image background for connected charts

[MINDoSOFT]

Version

4.2.1-rc.2

Reproduction link

https://jsfiddle.net/z9hj8xqd/3/

Steps to reproduce

Notice that the 2 charts are connected.

Click the save as image toolbox button.

See the transparent background between the charts in the exported png image.

What is expected?

When "save as image" is clicked for connected charts, the exported image should contain the background color for every part of the image.

What is actually happening?

Where there are no charts (e.g. other DOM elements), the background of the image is transparent.

---

I ran into this bug, because I have connected charts on my page and they have DOM elements in between them.

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

Have a nice day! 🍵

[Ovilia]

@MINDoSOFT Sorry I could not get it. The transparent between the two charts is expected since there's no chart and thus no background there.

[Meldanen]

I have the same issue.

@Ovilia Even though it's expected it doesn't make much sense from a user's perspective.
Shouldn't the space between the charts be filled in the the same background colour as the chart's? (e.g. white)

[Ovilia]

@Meldanen In this case, you can set the background of the container using CSS.

[MINDoSOFT]

Hello there,

@Ovilia I have tried your suggested approach by setting the background color of the parent div but still when saving the image the background for the space between the charts is transparent. You can see the jsfiddle here.

Here is how it looks in the browser

And here is how it looks after save as image (the black background is the transparent part)

Thank you for your time.

[Ovilia]

I see. So what do you think if we use CSS background color to render first, and then the chart background?