tooltip for stripline

[SCompliance]

Hello,

Is it possible to display a tooltip when user hovers over a stripline?

[Vishwas R]

@scompliance,

Showing tooltip to stripline is not available as an inbuilt feature as of now. However, you can show tooltip with few lines of code by adding a div on mouse-move as shown in the code-snippet below.

chart.container.addEventListener("mousemove", function(e) {
  var xPos = e.pageX - this.offsetLeft, 
      yPos = e.pageY - this.offsetTop,
      bounds = stripLine.bounds,
      index = stripLine._index;

  if((bounds.x1 <= xPos && xPos <= bounds.x2) && (bounds.y1 <= yPos && yPos <= bounds.y2)) {
    if(document.getElementById("striplineTooltip" + index)) {
      document.getElementById("striplineTooltip" + index).style.display = "block";
      document.getElementById("striplineTooltip" + index).style.left = xPos + "px";
      document.getElementById("striplineTooltip" + index).style.top = yPos + "px";
    }
    else {
      var tooltip = document.createElement("div");
      tooltip.setAttribute("id", "striplineTooltip" + index);
      tooltip.setAttribute("class", "tooltip");
      tooltip.innerHTML = "<div class='tooltiptext'>" + toolTipContent + "</div>";
      this.appendChild(tooltip);
    }
  }
  else {
    if(document.getElementById("striplineTooltip" + index)) {
      document.getElementById("striplineTooltip" + index).style.display = "none";
    }
  }
});

Please take a look at this JSFiddle for a working example on the same.

—
Vishwas R
Team CanvasJS

[SCompliance]

Thank you, is it also possible to add the stripline to the legend? (like dataseries 1 in this example https://jsfiddle.net/api/post/library/pure/) ?

[Vishwas R]

@scompliance,

Legends for striplines are not available as of now. However, you can add a dummy dataseries to show legend for stripline as shown in this updated JSFiddle.

If you are looking for something else, can you kindly fork the JSFiddle and share it with us so that we understand your scenario better & help you out?

—
Vishwas R
Team CanvasJS

[SCompliance]

Do you have the first example you sent using React ?

using CanvasJSChart

• This reply was modified 3 months, 1 week ago by SCompliance.

[Vishwas R]

@scompliance,

Please take a look at this Stackblitz link for an example on adding tooltip to Stripline in React, same as JSFiddle shared earlier.

—
Vishwas R
Team CanvasJS

[SCompliance]

https://stackblitz.com/edit/canvasjs-chart-tooltip-to-stripline-dt1nzk?file=src%2FApp.jsx

how to clear them ? if you hover on no data it will still be there

[Vishwas R]

@scompliance,

You can add tooltip to Stripline based on length of dataseries as shown in the code-snippet below.

if (chart.data && chart.data.length > 0) {
  addTooltipToStripline(chart.axisX[0].stripLines[0], 'Stripline 1');
}

Please take a look at this updated Stackblitz for complete code.

—
Vishwas R
Team CanvasJS

[SCompliance]

https://stackblitz.com/edit/canvasjs-chart-tooltip-to-stripline-nhtufj?file=src%2FApp.jsx

the tooltip will still be there when I zoom on another area

[Vishwas R]

@scompliance,

Checking if the startValue & endValue lies within the axis range should work fine in this case. Please find the code-snippet for the same below.

stripLine.startValue < stripLine.chart.axisX[0].viewportMaximum && stripLine.endValue > stripLine.chart.axisX[0].viewportMinimum

Please take a look at this updated Stackblitz for working code.

—
Vishwas R
Team CanvasJS

[SCompliance]

it might be in the viewport but moved if you zoomed in on it, it wont work

[SCompliance]

One of the issues is that on zoom the tooltips are not moving and are triggered on the old position of the striplines

[Vishwas R]

@scompliance,

Tooltip for stripline is not available as of now. In the current case of zooming / panning, the solution shared earlier can be improved further by checking if the current-mouse coordinate is within the plotarea bounds or not along with existing conditions as shown in the code-snippet below.

xPos >= stripLine.chart.plotArea.x1 && xPos <= stripLine.chart.plotArea.x2 && yPos >= stripLine.chart.plotArea.y1 && yPos <= stripLine.chart.plotArea.y2

Please take a look at this updated Stackblitz for working code.

—
Vishwas R
Team CanvasJS

[SCompliance]

thanks, I modified the code to add the tooltipContent from the options but for some reason it’s not working on zoom/panning.

Can you please have a look? https://stackblitz.com/edit/canvasjs-chart-tooltip-to-stripline-qdratg?file=src%2FApp.jsx

[SCompliance]

even on window resize the tooltip won’t be placed correctly