Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1799

Add tooltip option to ssr chart with echarts

$
0
0

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?


Viewing all articles
Browse latest Browse all 1799

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>