-
Notifications
You must be signed in to change notification settings - Fork 620
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to connect several charts on chart load? #560
Comments
Did you ever figure this out, @selvavm ? I'm having a similar problem |
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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,
other panel,
The text was updated successfully, but these errors were encountered: