jQuery Charts & Graphs with Crosshair

Download jQuery Chart Samples

Crosshairs, also known as Chart Cursor, are interactive vertical / horizontal lines that moves along the mouse pointer along with label that shows x & y values at the current mouse co-ordinates or the nearest data points. The given example shows Chart with Crosshair along with source code that you can edit in-browser or save to run locally.

Read More >>

Try Editing The Code

window.onload = function () {

var options = {
	animationEnabled: true,
	title:{
		text: "Stock Price of BMW - September"
	},
	axisX:{
		valueFormatString: "DD MMM",
		crosshair: {
			enabled: true,
			snapToDataPoint: true
		}
	},
	axisY: {
		title: "Closing Price (in USD)",
		valueFormatString: "$##0.00",
		crosshair: {
			enabled: true,
			snapToDataPoint: true,
			labelFormatter: function(e) {
				return "$" + CanvasJS.formatNumber(e.value, "##0.00");
			}
		}
	},
	data: [{
		type: "area",
		xValueFormatString: "DD MMM",
		yValueFormatString: "$##0.00",
		dataPoints: [
			{ x: new Date(2017, 08, 01), y: 85.83 },

			{ x: new Date(2017, 08, 04), y: 84.42 },
			{ x: new Date(2017, 08, 05), y: 84.97 },
			{ x: new Date(2017, 08, 06), y: 84.89 },
			{ x: new Date(2017, 08, 07), y: 84.78 },
			{ x: new Date(2017, 08, 08), y: 85.09 },
			{ x: new Date(2017, 08, 09), y: 85.14 },

			{ x: new Date(2017, 08, 11), y: 84.46 },
			{ x: new Date(2017, 08, 12), y: 84.71 },
			{ x: new Date(2017, 08, 13), y: 84.62 },
			{ x: new Date(2017, 08, 14), y: 84.83 },
			{ x: new Date(2017, 08, 15), y: 84.37 },
			
			{ x: new Date(2017, 08, 18), y: 84.07 },
			{ x: new Date(2017, 08, 19), y: 83.60 },
			{ x: new Date(2017, 08, 20), y: 82.85 },
			{ x: new Date(2017, 08, 21), y: 82.52 },
			
			{ x: new Date(2017, 08, 25), y: 82.65 },
			{ x: new Date(2017, 08, 26), y: 81.76 },
			{ x: new Date(2017, 08, 27), y: 80.50 },
			{ x: new Date(2017, 08, 28), y: 79.13 },
			{ x: new Date(2017, 08, 29), y: 79.00 }
		]
	}]
};

$("#chartContainer").CanvasJSChart(options);

}

Related Customization

You can make the crosshair snap to the nearest dataPoint by setting snapToDataPoint property to true. Also thickness and lineDashType of crosshair can be customized.