Drawing Arrow on Column Chart based on Threshold - CanvasJS JavaScript Charts

Drawing Arrow on Column Chart based on Threshold - 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 chart = new CanvasJS.Chart("chartContainer", {
  axisY: {
    stripLines: [{
      value: 75,
      thickness: 3,
      lineDashType: "dash"
    }]
  },
  data: [{
    type: "column",
    dataPoints: [
      { x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50, enableArrow: true },
			{ x: 40, y: 65 },
			{ x: 50, y: 85, enableArrow: true },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
    ]
  }]
});

chart.render();
renderArrow(chart);

function renderArrow(chart) {
  for (var i = 0; i < chart.data[0].dataPoints.length; i++) {
    if (chart.data[0].dataPoints[i].enableArrow) {
      var axisBounds = chart.axisX[0].get("bounds");
      var x1, x2, y1, y2;
      var threshold = chart.axisY[0].stripLines[0].value;

      x1 = x2 = chart.axisX[0].convertValueToPixel(chart.data[0].dataPoints[i].x);
      y1 = axisBounds.y1;
      y2 = chart.axisY[0].convertValueToPixel(chart.data[0].dataPoints[i].y);

      chart.ctx.strokeStyle = "#FF0000";
      chart.ctx.moveTo(x1, y1);
      chart.ctx.lineTo(x2, y2);
      chart.ctx.stroke();

      if (chart.data[0].dataPoints[i].y < threshold) {
        chart.ctx.moveTo(x2, y2);
        chart.ctx.lineTo(x2 + 10, y2 + 10);
        chart.ctx.moveTo(x2, y2);
        chart.ctx.lineTo(x2 - 10, y2 + 10);
        chart.ctx.stroke();
      } else {
        chart.ctx.moveTo(x1, y1);
        chart.ctx.lineTo(x1 + 10, y1 - 10);
        chart.ctx.moveTo(x1, y1);
        chart.ctx.lineTo(x1 - 10, y1 - 10);
        chart.ctx.stroke();
      }
    }
  }
}
$(window).resize(function() {
  renderArrow(chart);
});