Drawing on canvas - CanvasJS JavaScript Charts

Drawing on canvas - 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",
{
	axisX: {
  	stripLines: [
    {
      value: 30,
      color: "yellow"
    },
    {
      value: 70,
      color: "yellow"
    }]
  },
	data: [
	{
		type: "line",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	}					
	]
});

chart.render();

var bounds1 = chart.axisX[0].stripLines[0].get("bounds");
var bounds2 = chart.axisX[0].stripLines[1].get("bounds");
var text = bounds2.x1 - bounds1.x1;
text = text.toString() + " px";

chart.ctx.strokeStyle="#FF0000";
chart.ctx.moveTo(bounds1.x1, (bounds1.y1 + bounds1.y2) / 3);
chart.ctx.lineTo(bounds2.x1, (bounds2.y1 + bounds2.y2) / 3 ) ;
chart.ctx.stroke();

chart.ctx.moveTo(bounds1.x1, (bounds1.y1 + bounds1.y2) / 3);
chart.ctx.lineTo(bounds1.x1 + 10, (bounds2.y1 + bounds2.y2) / 2.5 ) ;
chart.ctx.moveTo(bounds1.x1, (bounds1.y1 + bounds1.y2) / 3);
chart.ctx.lineTo(bounds1.x1 + 10, (bounds2.y1 + bounds2.y2) / 3.5 ) ;
chart.ctx.stroke();

chart.ctx.moveTo(bounds2.x1, (bounds1.y1 + bounds1.y2) / 3);
chart.ctx.lineTo(bounds2.x1 - 10, (bounds2.y1 + bounds2.y2) / 2.5 ) ;
chart.ctx.moveTo(bounds2.x1, (bounds1.y1 + bounds1.y2) / 3);
chart.ctx.lineTo(bounds2.x1 - 10, (bounds2.y1 + bounds2.y2) / 3.5 ) ;
chart.ctx.stroke();

chart.ctx.fillStyle = "#000";
chart.ctx.font = "30px Arial";
chart.ctx.textAlign = "center";
chart.ctx.fillText(text, (bounds1.x1 + bounds2.x2) / 2, (bounds1.y1 + bounds1.y2) / 3 ) ;