JSFiddle - React, Tailwind, and code Playground
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 dps = [];
var selected = -1;
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Dynamic Chart with Draggable stripLines"
},
axisX: [{
stripLines: [{
value: 5
}]
}],
data: [{
type: "line",
dataPoints: dps
}]
});
var xVal = 0;
var yVal = 100;
var updateInterval = 1000;
var dataLength = 20;
var updateChart = function (count) {
count = count || 1;
for (var j = 0; j < count; j++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps.push({
x: xVal,
y: yVal
});
xVal++;
}
chart.render();
};
updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);
$(".canvasjs-chart-canvas").last().on("mousedown", function(e) {
// Get the selected stripLine & change the cursor
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
var snapDistance = 10;
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).css("cursor","pointer");
}
}
});
$(".canvasjs-chart-canvas").last().on("mousemove", function(e) {
// Move the selected stripLine
if(selected !== -1) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
chart.options.axisX[0].stripLines[selected].value = chart.axisX[0].convertPixelToValue(relX);
chart.render();
}
});
$(".canvasjs-chart-canvas").last().on("mouseup", function(e) {
// Clear Selection and change the cursor
selected = -1;
$(this).css("cursor","default");
});