Sync ToolTip problem when not the same X axis datapoints

• April 22, 2021 at 6:36 pm #34068
  
  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

  April 26, 2021 at 6:47 pm #34120
  
  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

  May 4, 2021 at 12:27 pm #34132
  
  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

  May 5, 2021 at 6:56 pm #34242
  
  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