Sync Tooltip across multiple charts in your dashboard with CanvasJS

Dashboards are generally used to visualize data with related information as multiple charts. While you are visualizing across multiple charts, it’s an added advantage if all the charts show up tooltip of particular data. For example, while visualizing sales data it’s good to show tooltip in the charts that’s showing coupon value used, number of sales on that date when you mouse over sales chart.

CanvasJS library provides API which allows developers to synchronize tooltip across multiple charts accurately. Library also has API to synchronize crosshair of corresponding axes across multiple charts.

Prerequisite

• JavaScript
• CanvasJS Charting Library

How to Sync Tooltip across Multiple Charts?

The logic to synchronize tooltip across multiple charts is simple. When tooltip is shown / updated in one chart, show or update the tooltip in all other charts and when it’s hidden from one chart, hide it in all other charts. To achieve this, CanvasJS provides updated, hidden events along with showAtX and hide methods.

Below is the code-snippet for the same.

toolTip = {
  updated: showTooltip,
  hidden: hideTooltip
};
function showTooltip(e) {
  for( var i = 0; i < charts.length; i++){
    if(charts[i] != e.chart)
      charts[i].toolTip.showAtX(e.entries[0].xValue);
  }
}

function hideTooltip(e) {
  for( var i = 0; i < charts.length; i++){
    if(charts[i] != e.chart)
      charts[i].toolTip.hide();
  }
}

Checkout live working example @ StackBlitz