Home Forums Chart Support Tooltip multiline chart Reply To: Tooltip multiline chart

#33435

@nerviozzo96,

Yes, you can also check the range in pixels by converting the dataPoints x and y-value to pixel using convertValueToPixel() as shown in the code snippet below –

toolTip: {
  contentFormatter: function(e){
    var content = "", dataPoint, yWithinRange, xWithinRange;

    var toolTipXValue = e.chart.axisX[0].convertValueToPixel(e.entries[0].dataPoint.x);
    var toolTipYValue = e.chart.axisY2[0].convertValueToPixel(e.entries[0].dataPoint.y);    

    for (var i = 0; i < e.chart.data.length; i++){

      dataPoint = e.chart.data[i].dataPoints[e.entries[0].index];      

      if(dataPoint){

        yWithinRange = ((toolTipYValue - yRange) <= e.chart.axisY2[0].convertValueToPixel(dataPoint.y) && e.chart.axisY2[0].convertValueToPixel(dataPoint.y) <= (toolTipYValue + yRange));

        xWithinRange = ((toolTipXValue - xRange) <= e.chart.axisX[0].convertValueToPixel(dataPoint.x) && e.chart.axisX[0].convertValueToPixel(dataPoint.x) <= (toolTipXValue + xRange));

        if(yWithinRange === true && xWithinRange === true){

          content += "<span style='color:" + e.chart.selectedColorSet[i] + "'>" + e.chart.data[i].name + "</span>: " + "<strong>" + dataPoint.y + "</strong>";
          content += "<br/>";
        }
      }
    }
    return content;
  }
},

Also, kindly take a look at this JSFiddle for a working example with sample code.

Displaying dataPoints that are close to each other

___________
Indranil Deo
Team CanvasJS