How to connect several charts on chart load?

[selvavm]

I am trying to develop a plugin for Grafana and I need to connect the charts. I cannot modify the source code so I need to add echart.connect on load of the charts?

I saw #9 and would like to know how can I do this?

Something like below,

const onChartReadyCallback = e => {
    chart = useRef(e)
    chart.group='abc'
    echart.connect('abc')
  }

<ReactEcharts ref='abc'
    option={this.getOption_1()}, onChartReady={onChartReadyCallback } />

other panel,

<ReactEcharts ref='abc'
    option={this.getOption_2()}, onChartReady={onChartReadyCallback } />

[bwidmeier]

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

[iago-f-s-e]

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" />
}

result:

Gravacao.de.tela.de.11-03-2024.03_00_57_.mp4