Programmatically exporting SVG rendered chart to PDF

[msbasanth]

What problem does this feature solve?

Now the SVG export feature is limited to toolbox and we have to follow below steps to get SVG from chart instance.

1. Use 'svg' as renderer when init ECharts;
2. Add saveAsImage in toolbox;
3. Click download in toolbox and will download the SVG chart.

Many times we need to embed the charts inside our PDF's which is not possible now as we don't have a SVG export API in place.

What does the proposed API look like?

echartsInstance. getDataURL currently supports only PNG or JPEG we should extend it to support SVG when the chart is rendered using SVG.

https://echarts.apache.org/en/api.html#echartsInstance.getDataURL

[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 it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe to our mailing list.

Have a nice day! 🍵

[pissang]

getDataURL can have 'svg' type.

getDataURL({ type: 'svg' });

It's missed in the doc

[msbasanth]

@pissang

ok thanks for the update.

I could confirm the getDataURL({type: 'svg'}) is giving base64 image as output, which can be embedded in pdf.

[VikasAgarwal1984]

AFAIK, Input for pdfmake is svg html or image(png/jpeg) base64 data.

Currently getDataURL({type: 'svg'}) returns data:image/svg+xml;charset=UTF-8......................
that is not working as an input.

Currently we read the outerHTML for rendered svg html element and feed to pdfmake api.

Created a stackblitz to demonstrate same. Please see console for error.
https://stackblitz.com/edit/angular-ivy-sfasil?file=src%2Fapp%2Fechart-basic%2Fechart-basic.component.ts

Is there an Api to get jpeg/png or svg html in case of svg rendering.

[msbasanth]

@VikasAgarwal1984 thanks for adding the comment. So we are getting base64 in svg+xml format.

@pissang Please point us to any approach with which we can embed an svg+xml base64 content in a pdf

[VikasAgarwal1984]

seems it is url encoded, I have updated the stackblitz link
seems we need to trim svg+xml to feed in pdfmake

[pissang]

We have new renderToSVGString method for server-sider rendering in our next release. I think it will be the best choice in this scene. See the related PR #15880 (comment)

Before that, decoding the base64 format is the only way if you wan't to get the HTML string