I generate a chart thanks to echarts in server-side :
getChart.ts
const chart = echarts.init(null, null, { renderer: 'svg', ssr: true, width: 400, height: 300 }); chart.setOption({ xAxis: { data: timeData }, yAxis: {}, series: [ { name: 'Sentiment', type: 'line', data: sentimentData }, { name: 'Volume', type: 'bar', data: volumeData } ], tooltip: { show: true } }); const chartToSvg = chart.renderToSVGString(); return chartToSvg;
And I get this chart in svelte-kit in load function which is passed in props to the page :
+page.server.ts
export const load: PageServerLoad = async () => { const chart = getChart(); return { chart };
+page.svelte
<script lang="ts"> import type { PageData } from './$types'; export let data: PageData;</script><div> {@html data.chart}</div>
The chart is well displayed. But now how I can transform this svg on client side to an echarts object to add tooltip: { show: true } option for example?
I've seen this sandbox : https://codesandbox.io/s/apache-echarts-5-3-ssr-csr-0jvsdu?from-embed but this is not what I want because I want to keep all the data on server-side and just add interactivity on chart rendered client-side.
Do you have any ideas to help me on that case please?