Adding tooltip to Stripline | CanvasJS

Adding tooltip to Stripline | CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 400px; width: 100%;"></div>

CSS

.tooltip {
  position: absolute;
  background-color: black;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  width: 100px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "light2",
  title: {
    text: "Adding tooltip to Stripline"
  },
  subtitles: [{
    text: "Move mouse over stripline"
  }],
  axisX:[{
    stripLines:[{                
      startValue: new Date(2020, 0, 6),
      endValue: new Date(2020, 0, 8),
      color: "#d8d8d8"
    }]
  }],
  data: [
    {
      type: "spline",
      dataPoints: [
        { x: new Date(2020, 0, 3), y: 650 },
        { x: new Date(2020, 0, 4), y: 700 },
        { x: new Date(2020, 0, 5), y: 710 },
        { x: new Date(2020, 0, 6), y: 658 },
        { x: new Date(2020, 0, 7), y: 734 },
        { x: new Date(2020, 0, 8), y: 963 },
        { x: new Date(2020, 0, 9), y: 847 },
        { x: new Date(2020, 0, 10), y: 853 },
        { x: new Date(2020, 0, 11), y: 869 },
        { x: new Date(2020, 0, 12), y: 943 },
        { x: new Date(2020, 0, 13), y: 970 },
        { x: new Date(2020, 0, 14), y: 869 },
        { x: new Date(2020, 0, 15), y: 890 },
        { x: new Date(2020, 0, 16), y: 930 }
      ]
    }
  ]        
});
chart.render();

addTooltipToStripline(chart.axisX[0].stripLines[0], "Stripline 1"); //Add tooltip to axisX's 1st stripline with 'Stripline 1' as tooltip-content


/*
*	@param stripLine - Stripline to which tooltip has to be added
*	@param toolTipContent - Tooltip content
*/
function addTooltipToStripline(stripLine, toolTipContent) {
  stripLine.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";
       ...