CanvasJS
  • Charts Gallery
  • Dashboards
  • Download
  • Docs
  • Pricing
  • Support
  • Blog
  • My Account
  • OVERVIEW
    • Chart with Zooming and Panning
    • Exporting Chart to Image
    • Chart with Animation
    • Chart with Multiple Axes
    • Chart with Dynamic Data
    • Chart with Logarithmic Axis
    • Chart using JSON Data
    • Performance with 50,000 Data Points
    • Chart with Crosshair
    • Chart inside Re-Sizable Container
    • Charts inside jQuery Tabs
    • Chart inside Popup Modal
    • Responsive jQuery Chart
    • Drilldown Chart
  • LINE CHARTS
    • Line Chart
    • Spline Chart
    • Step Line Chart
  • AREA CHARTS
    • Area Chart
    • Multi Series Area Chart with Date Time
    • Spline Area Chart
    • Multi Series Spline Area
    • Step Area Chart
    • Range Area Chart
    • Range Spline Area Chart
    • Stacked Area Chart
    • Stacked Area 100% Chart
  • COLUMN & BAR CHARTS
    • Column Chart
    • Bar Chart
    • Range Column Chart
    • Stacked Column Chart
    • Stacked Column 100% Chart
    • Range Bar Chart
    • Stacked Bar Chart
    • Stacked Bar 100% Chart
    • Waterfall Chart
  • PIE & FUNNEL CHARTS
    • Pie Chart
    • Pie Chart with Index Labels Placed Inside
    • Doughnut Chart
    • Funnel Chart
    • Funnel Chart with Custom Neck
    • Pyramid Chart
  • FINANCIAL CHARTS
    • Candlestick Chart
    • Candlestick Chart from JSON
    • OHLC Chart
  • SCATTER & BUBBLE CHARTS
    • Scatter Chart
    • Scatter Chart with Custom Markers
    • Bubble Chart
  • BOX & WHISKER CHARTS
    • Box and Whisker Chart
    • Box and Whisker Chart with Outliers
  • COMBINATION CHARTS
    • Error Chart
    • Error Line Chart
    • Combination of Column, Line and Area Chart
  • DYNAMIC CHARTS
    • Dynamic Line Chart
    • Dynamic Column Chart
    • Dynamic Multi Series Chart
  • REACT, ANGULAR, JQUERY
    • React Charts
    • Angular Charts
    • JavaScript Charts
  • SERVER SIDE TECHNOLOGIES
    • ASP.NET MVC Charts
    • PHP Charts
    • JSP Charts
    • Spring MVC Charts

jQuery Charts & Graphs with Crosshair

  • HTML Code Samples
  • PHP Code Samples
  • ASP.NET Code Samples
  • JSP Code Samples
  • Spring MVC Code Samples
  • Dashboard 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.

Try Editing The Code

Previous Next
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)",
		includeZero: false,
		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.

© fenopix
  • Download Free Trial
  • Documentation
  • Blog
  • Privacy Policy
Server-side Technologies
  • ASP.NET MVC Charts
  • PHP Charts
  • JSP Charts
  • Spring MVC Charts
Front-end Technologies
  • JavaScript Charts
  • jQuery Charts
  • React Charts
  • Angular Charts
Contact
  • FAQs
  • Sales Enquiries
  • Support Forum
  • Careers