Finding the Nearest dataPoint using toolTip events - CanvasJS JavaScript Charts

Finding the Nearest dataPoint using toolTip events - 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", {
	title: {
		text: "Finding the Nearest dataPoint using toolTip events"
	},
	toolTip: {
		contentFormatter: function (e) {
			for(var i = 0; i < e.entries.length; i++) {
				console.log("Nearest dataPoint: ", CanvasJS.formatDate(e.entries[i].dataPoint.x, "DD/MMM"));
			}
			return null;
		}
	},
	axisY: {
		includeZero: false
	}, 
	data: [{
		type: "spline",
		dataPoints: [
			{ x: new Date(2010, 0, 5), y: 700 },
			{ x: new Date(2010, 0, 7), y: 710 },
			{ x: new Date(2010, 0, 9), y: 658 },
			{ x: new Date(2010, 0, 11), y: 734 },
			{ x: new Date(2010, 0, 13), y: 963 },
			{ x: new Date(2010, 0, 15), y: 847 },
			{ x: new Date(2010, 0, 17), y: 853 },
			{ x: new Date(2010, 0, 19), y: 869 },
			{ x: new Date(2010, 0, 21), y: 943 },
			{ x: new Date(2010, 0, 23), y: 970 }
		]
	}]
});
chart.render();