Vertical Marker Crosshair with Label using Striplines - CanvasJS JavaScript Charts

Vertical Marker Crosshair with Label using Striplines - CanvasJS JavaScript Charts

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: 360px; width: 98%; margin: 2%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
    {	  
      title:{
        text: "Vertical Marker (crosshair) using Striplines",
				verticalAlign: "top",
				horizontalAlign: "center",
      },
	  	toolTip:{
        shared: "true",
        contentFormatter: function ( e ) {
          var content = " ";
          for (var i = 0; i < e.entries.length; i++) {
            content += e.entries[i].dataSeries.name +" "+"<strong>"+ e.entries[i].dataPoint.y +"</strong>";
            content += "<br/>";
          }
          content += "<p id='xData' style='display:none;'>"+ e.entries[0].dataPoint.x+ "</p>";
          return content;
        }
     },
     axisX:{
     	valueFormatString: "DD-HH:mm:ss"
     },
      axisY :{
        gridThickness : 0,
				lineDashType: "dot",
				includeZero: true,
				stripLines:[
				{                
					startValue:10,
					endValue:-10,                
					color: "rgba(83, 223, 128, .4)"                     
				}
				]
      },
	  data: getData(),
      
   });
chart.render();
	
//-------------using striplines as vertical marker-------------
function stripLineHandler(position){
  if(!chart.options.axisX){
    chart.options.axisX ={};
  }
  if(!chart.options.axisX.stripLines){
    chart.options.axisX.stripLines = [];
  }
  chart.options.axisX.stripLines[0] = {
    value : position,
    thickness: 2,
    //color:"red",
    showOnTop: true,
    label: (new Date(position).getDate()+"-"+new Date(position).getHours()+":"+new Date(position).getMinutes()+":"+new Date(position).getSeconds()),
    labelPlacement: "outside"
  }
  chart.render();
 }

var prevXData = null;

document.getElementById("chartContainer").onmousemove = function (){
	if( document.getElementById("xData") ){	
    var currentXData = new Date( document.getElementById("xData").innerHTML ).getTime();
    if(prevXData !== currentXData){
      stripLineHandler(currentXData);
      prevXData = currentXData;
    }
 ...