Highcharts synchronize tooltip on multiple charts with multiple series

ONLINECAST

2 min read

·

06-10-2024

8

0

Share

Synchronizing Tooltips Across Multiple Highcharts with Multiple Series

Problem: Imagine you have several Highcharts, each displaying different datasets. You want to create a seamless user experience where hovering over a point in one chart highlights the corresponding points in the other charts.

Rephrased: You're working with multiple charts showing related data, and you want to make them interact. When you hover over a point on one chart, you want the matching points on other charts to be highlighted with the tooltip showing its data.

Scenario: Let's say you have two Highcharts: one displaying sales data by month and the other displaying website traffic by month. You want to see how changes in website traffic correlate with sales fluctuations.

Original Code (Example):

Highcharts.chart('container1', {
  // Chart 1 configuration
  series: [{
    data: [ /* Sales data */ ]
  }]
});

Highcharts.chart('container2', {
  // Chart 2 configuration
  series: [{
    data: [ /* Traffic data */ ]
  }]
});

Analysis and Solution:

To synchronize tooltips across multiple Highcharts, we need a way to connect the charts and react to hover events. Highcharts provides a powerful mechanism for this: the linkedTo property.

1. Create a Linked Group: Assign the linkedTo property to each chart, referencing a shared identifier (e.g., 'linkedGroup'). This creates a group of linked charts.

2. Enable Tooltip Sharing: Set the tooltip.shared property to true on each chart. This allows the tooltip to display information from multiple series when hovering over any point.

3. Handle Hover Events: When hovering over a point in one chart, the linkedTo property ensures that the corresponding points in other charts are also highlighted, and their tooltips are displayed.

Modified Code:

Highcharts.chart('container1', {
  // Chart 1 configuration
  linkedTo: 'linkedGroup',
  tooltip: {
    shared: true
  },
  series: [{
    data: [ /* Sales data */ ]
  }]
});

Highcharts.chart('container2', {
  // Chart 2 configuration
  linkedTo: 'linkedGroup',
  tooltip: {
    shared: true
  },
  series: [{
    data: [ /* Traffic data */ ]
  }]
});

Key Points:

• The linkedTo property is essential for synchronizing tooltips. It establishes a connection between the charts.
• Setting tooltip.shared to true ensures that all corresponding points' data are shown in the tooltip when hovering over any single point.

Additional Considerations:

• Multiple Series: If your charts have multiple series (e.g., sales by region, website traffic by source), the linkedTo property will synchronize tooltips for all corresponding points across all series in the linked group.
• Data Alignment: Ensure that the data points in your linked charts are aligned correctly (e.g., have the same x-axis values) for accurate synchronization.
• Custom Tooltip Formatting: You can customize the tooltip to display specific information or data from each series using the formatter property within the tooltip configuration.

Conclusion:

By leveraging the linkedTo property and tooltip.shared setting, you can effectively synchronize tooltips across multiple Highcharts, enhancing user experience and enabling insightful comparisons between related datasets. This powerful technique makes it easy to visualize correlations and patterns between different data points, facilitating deeper data analysis.