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?

[MINDoSOFT]

For my use case, I believe only the chart background should be used. There is no need to use the css background color.

Best regards,

Sergios.

[Meldanen]

Chart background makes sense for me as well

[Ovilia]

But there are two chart instances, and thus two possible backgroundColor options.
What is expected if they are set to be different values?

[MINDoSOFT]

Hi @Ovilia ,

only in the case where the charts have different background colors, I think the container css background color should be used.

[Ovilia]

I think this breaks the consistency of expectation. For example, if the user has set CSS background, he may confuse why in some cases it is used and some not.

[Ovilia]

I had a second thought and found CSS background may not be accurate, because the container may have a transparent background while the ancestors may have a background color.
So, in this commit, I added an option toolbox.feature.saveAsImage.connectedBackgroundColor to configure the background color between the connected charts, and the default value is '#fff'.