[Feature] Parse SSR-generated chart from SVG to EchartsType on client

[putxe]

What problem does this feature solve?

The sandbox here coming from the following page documentation shows that we have to re-render a chart on client side with its data to add some interactivity on it (like tooltip).

I would like to generate a chart on server-side (svg output), render it, and add some options on client-side (like tooltip for example) without creating a new graph.

What does the proposed API look like?

I suggest using a "parseSVG" or "parseSVGToEcharts" function which takes in input a stringified svg or inline svg and converts it to an EchartsType.

In that way, we could set options to this svg and render it on client :

const svgString = data.svgChart; // the generated svg chart coming from the server
const myChart = parseSvg(svgString) 

myChart.setOption({
    title: {
        text: 'YEAH'
    }
})

[helgasoft]

...we could set options to this svg and render it on client

Final myChart.setOption is client-rendering. Wouldn't that make SSR meaningless ? Server could just send partial XML option instead of SVG.

[putxe]

In fact I don't want to pass data series directly in the client. That's why generating a svg from the server and making it interactive on the client can be very useful for me.

[helgasoft]

I don't want to pass data series directly in the client.

Understandable if this is for security reasons, but data will still be exposed after parsing: const myChart = parseSvg(svgString); op = myChart.getOption(); console.log(op.series[0].data);

[putxe]

Yes you're right for sure. But a bit more complicated to scrape I think. Because I run a svelte kit application that shows all the data coming from the server in network tab, so I thought about sending only the generated chart from the server to the client instead of sending the data. And make the chart interactive then.

[Ovilia]

I don't understand how do you think it should provide the ability of tooltip if it were not rendered on the client side?

[putxe]

I want to render it on the client side (mandatory for displaying the tooltip). But instead of receiving options from the server (including data that can be accessed directly on the API endpoint), I would prefer to :

on server-side

• generate first an svg echarts on the server-side
• send it to the client

on client-side

• parse the svg received and convert it as an echarts object in client
• add options to this chart (like tooltip)
• render the chart

With this process, the data is a bit more complicated to access in my case (request my-endoint/__data.json will return an svg instead of options with data).

My main point with this issue is to add the ability to convert a svg to an echarts instance on the client side.