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 jQuery Range Column Chart along with HTML source code that you can edit in-browser or save to run it locally.
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"
},
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);
}
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