Stripline

[malvika]

Is it possible to remove and add stripline on click action

[Indranil]

@malvika,

You can use the axis addTo method to add stripLines dynamically on click. To remove the same you can use the remove method of stripLines as shown in the code snippet below –

Adding stripLines –
chart.axisX[0].addTo("stripLines", {value: 50, showOnTop: true});

Removing stripLines –
chart.axisX[0].stripLines[1].remove();

___________
Indranil Deo
Team CanvasJS

[malvika]

Hello Indranil,

Thanks for your response the above method works!. I have another scenario in which i should be able to drag and drop the stripeline to a particular value . Kindly suggest an approach .

Regards,
Malvika

[Indranil]

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