Interactive, vertical line annotations on CanvasJS graph

Question

I'm trying to add annotations to my CanvasJS graph in a way similar to dygraphs' functionality( example here) but haven't found a way to. I've seen an example where they replaced a point with an image (here) but it isn't quite the same, as I need the marker between points and to have it's own tooltip. Is there any way to achieve this in CanvasJS?

Answer 1

You can use indexLabels along with indexLabelLineThickness to show annotation but toolTip are shown only for dataPoints.

var chart = new CanvasJS.Chart("chartContainer", {
title: {
	text: "Line Chart with Index-Labels"
},
data: [{
	type: "line",
	indexLabelBackgroundColor: "LightBlue",
	indexLabelLineThickness: 1,    
	dataPoints: [
		{ x: 10, y: 71 },
		{ x: 20, y: 55, indexLabel: "{y}" },
		{ x: 30, y: 50 },
		{ x: 40, y: 65 },
		{ x: 50, y: 95 },
		{ x: 60, y: 68, indexLabel: "{y}" },
		{ x: 70, y: 28 },
		{ x: 80, y: 34, indexLabel: "{y}" },
		{ x: 90, y: 14 }
	]
}]
});

chart.render();

<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 250px; width: 100%;"></div>