jQuery Range Column Charts & Graphs

Download jQuery Code Samples

jQuery Range Column Charts are similar to Column Charts except that they are drawn between a range of values - Low & High. Range Column Charts, also referred as Vertical Range Column Charts are generally used to show variations (low & high) in a given time range like price, temperature etc. The given example shows simple Range Column Chart along with HTML / jQuery source code that you can edit in-browser or save to run it locally.

Try Editing The Code

window.onload = function () {

//Better to construct options first and then pass it as a parameter
var options = {
	animationEnabled: true,
	exportEnabled: true,
	theme: "light2",
	title:{
		text: "Monthly Temperature Range in India- 2015"
	},
	axisY:{
		title: "Temperature (°C)",
		suffix: "°C",
		includeZero: false
	},
	data: [{
		type: "rangeColumn",
		toolTipContent: "<b>{x}</b><br/>Minimum: {y[0]}°C<br/>Maximum: {y[1]}°C",
		dataPoints: [
			{ x: new Date(2015, 00, 01), y: [13.51, 24.58] },
			{ x: new Date(2015, 01, 01), y: [15.55, 26.89] },
			{ x: new Date(2015, 02, 01), y: [17.99, 29.07] },
			{ x: new Date(2015, 03, 01), y: [21.18, 31.87] },
			{ x: new Date(2015, 04, 01), y: [23.54, 34.09] },
			{ x: new Date(2015, 05, 01), y: [23.82, 32.48] },
			{ x: new Date(2015, 06, 01), y: [24.28, 31.88] },
			{ x: new Date(2015, 07, 01), y: [23.82, 31.52] },
			{ x: new Date(2015, 08, 01), y: [22.52, 31.55] },
			{ x: new Date(2015, 09, 01), y: [20.68, 31.04] },
			{ x: new Date(2015, 10, 01), y: [17.81, 28.10] },
			{ x: new Date(2015, 11, 01), y: [14.75, 25.67] }
		]
	}]
};

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

Related Customization

toolTipContent property can be used to customize the contents of the toolTip. Other frequently used customization options are indexLabel, dataPointWidth, animationEnabled, theme, etc.

Note   For step by step instructions, follow our jQuery Integration Tutorial