JavaScript
var selected = -1;
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Chart with Draggable stripLines in Candlestick Chart"
},
axisX: {
interval:2,
intervalType: "month",
valueFormatString: "MMM-YY",
labelAngle: -45
},
axisY: [{
includeZero:false,
title: "Prices",
prefix: "$ ",
stripLines: [{
value: 4550,
label: "4550",
labelPlacement: "outside"
}, {
value: 5300,
label: "5300",
labelPlacement: "outside"
}, {
value: 6200,
label: "6200",
labelPlacement: "outside"
}]
}],
data: [{
type: "candlestick",
dataPoints: [
{ x: new Date(2012,01,01),y:[5198, 5629, 5159, 5385]},
{x: new Date(2012,02,01),y:[5366, 5499, 5135, 5295]},
{x: new Date(2012,03,01),y:[5296, 5378, 5154, 5248]},
{x: new Date(2012,04,01),y:[5254, 5279, 4788, 4924]},
{x: new Date(2012,05,01),y:[4910, 5286, 4770, 5278]},
{x: new Date(2012,06,01),y:[5283, 5348, 5032, 5229]},
{x: new Date(2012,07,01),y:[5220, 5448, 5164, 5258]},
{x: new Date(2012,08,01),y:[5276, 5735, 5215, 5703]},
{x: new Date(2012,09,01),y:[5704, 5815, 4888, 5619]},
{x: new Date(2012,10,01),y:[5609, 5885, 5548, 5879]},
{x: new Date(2012,11,01),y:[5878, 5965, 5823, 5905]},
{x: new Date(2013,00,01),y:[5937, 6111, 5935, 6034]},
{x: new Date(2013,01,01),y:[6040, 6052, 5671, 5693]}
]
}]
});
chart.render();
document.getElementsByClassName("canvasjs-chart-canvas")[1].addEventListener("mousedown", function(e) {
var parentOffset = this.closest("#chartContainer").getBoundingClientRect();
var relX = e.clientX - parentOffset.left;
var relY = e.clientY - parentOffset.top;
var snapDistance = 5;
for(var i = 0; i < chart.options.axisY[0].stripLines.length; i++) {
if(relX > chart.axisY[0].stripLines[i].get("bounds").x1 && relX < chart.axisY[0].stripLines[i].get("bounds").x2 && relY >...