Vertical Marker Crosshair with Label and Dragging using Striplines - CanvasJS JavaScript Charts

Vertical Marker Crosshair with Label and Dragging 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", {
backgroundColor:"#000",
  title: {
    text: "Vertical Marker (crosshair) using Striplines",
		fontColor:"white"
  },
  toolTip: {
    contentFormatter: function(e) {
      var content = " ";
      for (var i = 0; i < e.entries.length; i++) {
        content += "<strong>" + e.entries[i].dataPoint.y.toFixed(2); + "</strong>";
        content += "<br/>";
      }
      content += "<p id='xData' style='display:none;'>" + e.entries[0].dataPoint.x + "</p>";
      return content;
    }
  },
  axisX: {
    valueFormatString: "HH:mm",
    gridThickness:1,
    labelFontColor:"white"
  },
  axisY2: {    
    lineDashType: "dot",
    includeZero: true,
    labelFontColor:"#25A18E"
  },
  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).getHours() + ":" + new Date(position).getMinutes()),
    labelPlacement: "outside",
    labelFontColor:"white",
    labelBackgroundColor:"orange"
  }
  chart.render();
}

var prevXData = null;
var downFlag = false;

document.getElementById("chartContainer").onmousedown = function() {
  downFlag = true;
} 

document.getElementById("chartContainer").onmouseup = function() {
  downFlag = false;
}


document.getElementById("chartContainer").onmousemove = function() {
  if (document.getElementById("xData")) {
    if (downFlag) {
      chart.options.toolTip.enabled = true;
      chart.render();
      var currentXData = new Date(document.getElementById("xData").innerHTML).getTime();
      if (prevXData !== currentXData) {
        stripLineHandler(currentXData);
        prevXData = currentXData;
      }
    } else...