Resizing the vue echart without affecting the DOM

[Vitomir2]

Hi Community,

Does anyone know if there is a way to resize the vue-echart without affecting the DOM, but still have my v-chart component auto resizable?

The idea is that I am exporting the chart to word document. However, when I am using a monitor, the size of the chart is much bigger and I have found only way to handle this size with using the resize() method. However, when I resize my chart to a fixed width and height it also affects my DOM, in my case, it cuts part of the data.

Before:

After:

[Justineo]

Not sure what you mean by "without affecting the DOM" specifically. If you are using the autoresize prop the graph probably shouldn't be cut off like this.

[Vitomir2]

@Justineo well, the thing is that when I export the chart to word file, it expands the chart too much when exported from bigger screens. The chart acquire egg shape, not circled like it is seen on the web page. When I shrink the screen size, then it is exported perfectly. Therefore, I decided to resize the chart before exporting it. However, this way my chart got corrupted, as it can be seen above. I want to keep my chart resizable based on the webpage screen, but still not affected from the resizing before export.

I have found workaround, but do not know if that is the best way handling my problem. I just added second chart which is display: none; and I am resizing and copying this one, instead of the original that is visible to the user.