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.