Reply To: How to sync multiple charts if charts are rendered with a condition

[Vishwas R]

@scompliance,

Zooming across charts is not working after switching the dashboard as you are resetting the chart-references on switching the charts. Instead setting the selectedDashboard only if the value has changed & adding chart-references only once should work fine for you. Please find the updated code-snippet below.

Change selectedDashboard only if the value has changed.

const handleDashboardChange = (event) => {
  if (event.target.value !== selectedDashboard) {
    setSelectedDashboard(event.target.value);
  }
};

Add chart-ref only once.

<CanvasJSChart
  key={index}
  options={options}
  onRef={(ref) => {
    if (ref && !chartsRef.current.includes(ref)) {
      chartsRef.current.push(ref);
    }
  }}
/>

Please take a look at this updated Stackblitz for working example.

—
Vishwas R
Team CanvasJS