CODEWITHSUNDEEP
javascripttypescriptsveltesveltekitecharts
Putxe
Putxe

Reputation: 1074

Add tooltip option to ssr chart with echarts

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?

Upvotes: 0

Views: 145

Answers (1)

Yue JIN
Yue JIN

Reputation: 2101

You can hydrate the server-rendered chart with ECharts lightweight client runtime to get simple interactions: click, mouseover, and mouseover. However, it does not support interactions with high real-time requirements (such as displaying tooltips when moving the mouse).

If you need to show tooltips, you still have to replace the server-rendered ECharts with client-side lazy loading "full" ECharts.

Upvotes: 0

Related Questions