jQuery Range Column Charts & Graphs

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.