Show tooltip for all stockcharts

[mustadirmahmood]

Hello,

I have a stockchart that consists of 2 line charts.
Here is a working fiddle link: https://jsfiddle.net/mustadirmahmood/re8qdzc9/1/

In the two charts, some of their x coordinates match and some do not.
For example,
if chart 1 has coordinates {x: 2, y: any_random_number}, {x: 4, y: any_random_number}, {x: 6, y: any_random_number}
& chart 2 has coordinates {x: 3, y: any_random_number}, {x: 5, y: any_random_number}, {x: 6, y: any_random_number}

so the first 2 points have different x coordinates but the last one has same x coordinate of 6.
When user hovers over chart 1 at point with x-coordinate = 6, two tooltips are shown showing the coordinates of each chart.
ex. https://imgur.com/a/tRuEcCv

but when user hovers over chart 1 at point with x-coordintate = 2, then only one tooltip is shown in chart 1, and no tooltip is shown for chart 2 since x = 2 does not exist in chart 2. ex. https://imgur.com/E1F0bNF

How can I show tooltip in both charts even if their coordinates do not match at that point?

If not can we show the closest coordinate as tooltip in the other chart?

[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

[mustadirmahmood]

Hi Manoj Mohan, thanks for your reply. I see that you are using the updated property inside toolTip and you are accessing the stockChart object from withing the options itself via the showTooltip function.
Is there any way to implement this without accessing the stockChart object and manually invoking the showAt function from the options level?

[Manoj Mohan]

@mustadirmahmood,

You can get access to stockchart object from event parameter of tooltip’s updated event as e.chart.stockChart. Please take a look at the code snippet below to show the tooltip across charts in stockchart based on nearest x value.

function showTooltip(e) {
  var stockChart = e.chart.stockChart;
  var charts = stockChart.charts;

  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));
    }
  }
}

function hideTooltip(e) {
  var stockChart = e.chart.stockChart;
  var charts = stockChart.charts;

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

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

—-
Manoj Mohan
Team CanvasJS