Sync ToolTip problem when not the same X axis datapoints

[Martin Hubert]

Hello,

I have a problem to sync Tooltip when the charts don’t have the same X axis datapoints; tooltip is not displayed on charts if no datapoint behind the X axis value => “charts[j].toolTip.showAtX(e.entries[0].xValue”.

In your exemple “Sync ToolTip across Multiple JavaScript Charts ” if you remove some points of one of the charts you should see the problem withe the tooltip synch.

The behaviour I expected is to see the tooltip of the X axis datapoint the closest of the “xValue” but not nothing.

Thanks

Nicolas

[Manoj Mohan]

Nicolas,

tooltip.showAt() shows the tooltip for specified x value passed as parameter not to nearest x value. In order to show tooltip to nearest x value, you can find the nearest x value and pass it in showAt method to display it. Please take a look at below code snippet for showing tooltip for nearest x value.

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 < charts.length; i++){
    if(charts[i] != e.chart) {
    	charts[i].toolTip.showAtX(getNearestXValues(e.entries[0].xValue, charts[i].data[0].dataPoints));
    }
      
  }
}

Also, check out this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Martin Hubert]

Hello,

It’s better but the problem is not solve completely. I change the jsfiddle to add more datapoints :

https://jsfiddle.net/8xn4qhou/

If we navigate on shart 2 ( from X 10 to X 60 ) the tooltip on chart 4 are not good.

Thx

Nicolas

[Manoj Mohan]

Nicolas,

We achieve the tooltip syncing using updated event and showAtX method of tooltip. Whenever tooltip of any chart is updated, the updated event of tooltip for that respective chart is called and we use e.entries[0].xValue i.e. dataPoint x value to display tooltip at respective x value on every chart. In the example you have shared, the chart 2 there is no dataPoint between 10 and 60 because of which updated event passes x value as 10 or 60 to display other charts based on mouse movement.

—-
Manoj Mohan
Team CanvasJS