I am trying to develop a plugin for Grafana and I need to connect the charts. I cannot

Did you ever figure this out, <a class="user-mention notranslate" data-hovercard-type=

How to connect several charts on chart load? about echarts-for-react HOT 2 OPEN

selvavm commented on May 23, 2024 1

How to connect several charts on chart load?

from echarts-for-react.

Comments (2)

bwidmeier commented on May 23, 2024

Did you ever figure this out, @selvavm ? I'm having a similar problem

from echarts-for-react.

iago-f-s-e commented on May 23, 2024

I had the same problem, I did a POC to validate my idea and it worked.

I created a wrapper for ReactECharts that looked like this:

import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';

type Props = {
  options: echarts.EChartsOption,
  groupToConnect?: string
}

export const EchartContainer = ({options, groupToConnect}: Props) => {
  return (
    <div
      style={{
        display: "flex",
        width: "100%"
      }}
    >
      <ReactECharts
        option={options}
        onChartReady={(instance) => {
          if (groupToConnect !== undefined) {
            instance.group = groupToConnect
            echarts.connect(groupToConnect)
          }
        }}
        style={{
          width: '100%',
          height: '500px',
        }}
      />
    </div>
  )
}

and the usage was as follows:

// first-chart.tsx
export const FirstChart = () => {
  const options = {
  // component implementation
  // ...

  return <EchartContainer options={options} groupToConnect="SAME-GROUP-CONNECT-ID" />
}

// second-chart.tsx
export const SecondChart = () => {
  const options = {
  // component implementation
  // ...

  return <EchartContainer options={options} groupToConnect="SAME-GROUP-CONNECT-ID" />
}