Home › Forums › Chart Support › Stripline › Reply To: Stripline
Malvika,
You can drag a stripLine with the help of mouse events by checking if the mousedown event was fired within the bounds of stripLine and drag the same by updating the value property within mousemove event as shown in the code snippet below –
$(".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 = 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).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.options.data[1].dataPoints[0].x = chart.options.axisX[0].stripLines[selected].value - 1; chart.render(); } }); $(".canvasjs-chart-canvas").last().on("mouseup", function(e) { // Clear Selection and change the cursor selected = -1; $(this).css("cursor","default"); });
Also, please check this JSFiddle for an example on draggable stripLines.
The same approach works across dynamic charts as well. Please check this thread for more information.
___________ Indranil Deo Team CanvasJS