Vertical and Horizontal Marker (crosshair) using Striplines - CanvasJS

Vertical and Horizontal Marker (crosshair) using Striplines

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<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: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
    {	  
      title:{
        text: "Vertical and Horizontal Marker (crosshair) using Striplines",
      },      
	  	toolTip:{
        shared: "true",
        contentFormatter: function ( e ) {

          content = e.entries[0].dataPoint.x +" : "+"<strong>"+ e.entries[0].dataPoint.y +"</strong>";
          e.chart.currentX = e.entries[0].dataPoint.x;
          e.chart.currentY = e.entries[0].dataPoint.y;          
          return content;
        }
     },
     
     axisY :{
        gridThickness : 0,
     },
	   data: getData(),
      
   });
chart.render();


document.getElementById("chartContainer").onmousemove = function (){
    if(chart.prevXData !== chart.currentX || chart.prevYData !== chart.currentY){
      stripLineHandler(chart, chart.currentX, chart.currentY);
      chart.prevXData = chart.currentX;
      chart.prevYData = chart.currentY;
    }

}


//-------------using striplines as CrossHair marker-------------
function stripLineHandler(chart, positionX, positionY){
  if(!chart.options.axisX)
    chart.options.axisX ={};

  if(!chart.options.axisX.stripLines){
    chart.options.axisX.stripLines = [];
    chart.options.axisX.stripLines[0] = {
      thickness: 2,
      //color:"red",
      showOnTop: true,
      lineDashType:"dash"
    }
  }
  if(!chart.options.axisY)
    chart.options.axisY ={};
    
  if(!chart.options.axisY.stripLines){
    chart.options.axisY.stripLines = [];
    chart.options.axisY.stripLines[0] = {
      thickness: 2,
      //color:"red",
      showOnTop: true,
      lineDashType:"dash"
    } 
  }
  
  chart.options.axisX.stripLines[0].value = positionX;
  chart.options.axisY.stripLines[0].value = positionY,
  chart.render();
 }


//----------------------------------------------------------------
	
//---------------- generating random data-------------------------

function getData(){    
  var data = [];
  var numberOfDataSeries = 1;
  for(var j=0 ; j < numberOfDataSeries;...