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.
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: "{x}
Minimum: {y[0]}°C
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.