Chart with Draggable stripLine - CanvasJS JavaScript Charts

Chart with Draggable stripLine - 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: 100%;"></div>

JavaScript

var selected = -1;
var chart = new CanvasJS.Chart("chartContainer", {        
  title: {
    text: "Chart with Draggable stripLines"
  },
  axisX: [{
    stripLines: [{
      value: 50
    }]
  }],
  data: [{
    type: "line",
    dataPoints: [
      { x: 10, y: 710 },
      { x: 20, y: 550 },
      { x: 30, y: 500 },
      { x: 40, y: 650 },
      { x: 50, y: 950 },
      { x: 60, y: 680 },
      { x: 70, y: 280 },
      { x: 80, y: 340 },
      { x: 90, y: 140 }
    ]
  }]
});

var xVal = chart.options.axisX[0].stripLines[0].value-1;
chart.options.data.push({
  type: "scatter",
  indexLabelOrientation: "horizontal",
  toolTipContent: null,
  highlightEnabled: false,
  fillOpacity: 0,
  dataPoints: [
    {x: xVal, y: 800, indexLabel: "P"}
  ],
});
chart.render();

document.getElementsByClassName("canvasjs-chart-canvas")[1].addEventListener("mousedown", function(e) {
  // Get the selected stripLine & change the cursor
  var parentOffset = this.offsetParent;
  var relX = e.pageX - parentOffset.offsetLeft;
  var relY = e.pageY - parentOffset.offsetTop;
  var snapDistance = 5;

  for(var i = 0; i < chart.options.axisX[0].stripLines.length; i++) {
    if(relX > chart.axisX[0].stripLines[i].get("bounds").x1 - snapDistance && relX < chart.axisX[0].stripLines[i].get("bounds").x2 + snapDistance && relY > chart.axisX[0].stripLines[i].get("bounds").y1 && relY < chart.axisX[0].stripLines[i].get("bounds").y2) {
      selected = i;
      this.style.cursor = "pointer";
    }
  }
});

document.getElementsByClassName("canvasjs-chart-canvas")[1].addEventListener("mousemove", function(e) {
  // Move the selected stripLine
  if(selected !== -1) {
    var parentOffset = this.offsetParent;
    var relX = e.pageX - parentOffset.offsetLeft;
    chart.options.axisX[0].stripLines[selected].value = chart.axisX[0].convertPixelToValue(relX);
    chart.options.data[1].dataPoints[0].x = chart.options.axisX[0].stripLines[selected].value - 1;
    chart.render();
 ...