Coordinating Tooltips Across Multiple CanvasJS Charts Using React Context

Analyzing related data points across multiple charts simultaneously significantly enhances the user's ability to identify trends, correlations, and anomalies. A powerful way to achieve this in a web application is by synchronizing the tooltips displayed on these charts. This ensures that as a user interacts with one chart, relevant data for the same point (typically based on the x-axis value) is highlighted across all linked charts.

This article outlines a concise and effective solution for coordinating tooltips in CanvasJS Charts rendered within a React application, even when these charts are defined in separate component files. The core of this approach lies in leveraging the showAtX method provided by the CanvasJS API and managing the shared tooltip state using React Context.

Prerequisites

• React with hooks, JavaScript (ES6+).
• @canvasjs/react-charts

Approach

• React Context: Centralizes chart refs and tooltip handlers.
• Dynamic Refs: Tracks chart instances across files.
• showAtX Method: Aligns tooltips at shared x-values.
• Layout: CSS Grid places two charts side-by-side, one below.

Implementation Overview

To easily keep tooltips in sync across charts, even when they're in separate files for modularity, we use a central ChartProvider for the shared logic. Given all charts share the 12-month x-axis (x: 1–12), interacting with a data point on one instantly brings up the corresponding tooltips across the others.

Chart Context and Synchronization Mechanism

The ChartContext centralizes chart instance management and tooltip coordination.

ChartContext.js

• Context: createContext() enables sharing refs and handlers.
• Refs: useRef([]) stores chart instances, indexed by index prop.
• Registration: registerChart(index, ref) assigns chart instances to chartRefs.current[index].
• Handlers:
  • handleTooltipUpdated(e, currentChartIndex): Extracts x-value (e.entries[0]?.dataPoint?.x) and calls showAtX(xValue) on all charts except the source.
  • handleTooltipHidden(currentChartIndex): Clears tooltips on other charts via toolTip.hide().

The ChartProvider wraps chart components, exposing these functions.

Synchronization Process

• Trigger: Hovering a data point (e.g., x: 3, March) fires toolTip.updated, invoking handleTooltipUpdated.
• Propagation: The x-value is shared, triggering showAtX on other charts to show tooltips at the same x-value.
• Hiding: toolTip.hidden calls handleTooltipHidden, clearing tooltips on other charts.
• Cross-File Coordination: Context ensures all charts, defined in separate files, access shared refs and handlers.

The showAtX method aligns tooltips precisely, assuming identical x-axis scales (x: 1–12).

The complete implementation is available below in the embedded code sample. Dive into the code for the ChartContext, the ChartProvider handling chart instance registration and event logic, and the individual chart component consuming the context. This pattern serves as a clear blueprint for building similar interactive multi-chart dashboards.

Conclusion

In summary, we've established a robust method for synchronizing tooltips across multiple CanvasJS Charts, even when defined in separate React components. This is achieved by leveraging React Context for centralized state management and sharing core synchronization handlers, paired with the CanvasJS toolTip.showAtX() method for programmatic tooltip control based on a common x-value. This pattern enables seamless, simultaneous data point analysis across linked chart views.