Reply To: Show tooltip for all stockcharts

[Manoj Mohan]

@mustadirmahmood,

The tooltip of the charts within StockChart are synced based on x-values by default. In order to sync tooltip based on nearest x-values, you can find the nearest x-values and show tooltip on the other charts using showAt method of toolTip. Please take a look at the code snippet below.

function getNearestXValues(xVal, dps1) {

  return [].concat(dps1).sort(function(a, b) {
    var diffA = Math.abs(xVal - a.x);
    var diffB = Math.abs(xVal - b.x);
    return diffA - diffB; // sort a before b when the distance is smaller
  })[0].x;

}

function showTooltip(e) {
  for( var i = 0; i < stockChart.charts.length; i++){
    if(stockChart.charts[i] != e.chart) {
      stockChart.charts[i].toolTip.showAtX(getNearestXValues(e.entries[0].xValue, stockChart.charts[i].data[0].dataPoints));
    }

  }
}

Also, check out this updated JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS