CanvasJS
  • Charts Gallery
  • Dashboards
  • Download
  • Docs
  • Pricing
  • Support
  • Blog
  • My Account
  • OVERVIEW
    • Chart with Zooming and Panning
    • Exporting Chart to Image
    • Chart with Animation
    • Chart with Multiple Axes
    • Chart with Dynamic Data
    • Chart with Logarithmic Axis
    • Chart using JSON Data
    • Performance with 50,000 Data Points
    • Chart with Crosshair
    • Chart inside Re-Sizable Container
    • Charts inside jQuery Tabs
    • Chart inside Popup Modal
    • Responsive jQuery Chart
    • Drilldown Chart
  • LINE CHARTS
    • Line Chart
    • Spline Chart
    • Step Line Chart
  • AREA CHARTS
    • Area Chart
    • Multi Series Area Chart with Date Time
    • Spline Area Chart
    • Multi Series Spline Area
    • Step Area Chart
    • Range Area Chart
    • Range Spline Area Chart
    • Stacked Area Chart
    • Stacked Area 100% Chart
  • COLUMN & BAR CHARTS
    • Column Chart
    • Bar Chart
    • Range Column Chart
    • Stacked Column Chart
    • Stacked Column 100% Chart
    • Range Bar Chart
    • Stacked Bar Chart
    • Stacked Bar 100% Chart
    • Waterfall Chart
  • PIE & FUNNEL CHARTS
    • Pie Chart
    • Pie Chart with Index Labels Placed Inside
    • Doughnut Chart
    • Funnel Chart
    • Funnel Chart with Custom Neck
    • Pyramid Chart
  • FINANCIAL CHARTS
    • Candlestick Chart
    • Candlestick Chart from JSON
    • OHLC Chart
  • SCATTER & BUBBLE CHARTS
    • Scatter Chart
    • Scatter Chart with Custom Markers
    • Bubble Chart
  • BOX & WHISKER CHARTS
    • Box and Whisker Chart
    • Box and Whisker Chart with Outliers
  • COMBINATION CHARTS
    • Error Chart
    • Error Line Chart
    • Combination of Column, Line and Area Chart
  • DYNAMIC CHARTS
    • Dynamic Line Chart
    • Dynamic Column Chart
    • Dynamic Multi Series Chart
  • REACT, ANGULAR, JQUERY
    • React Charts
    • Angular Charts
    • JavaScript Charts
  • SERVER SIDE TECHNOLOGIES
    • ASP.NET MVC Charts
    • PHP Charts
    • JSP Charts
    • Spring MVC Charts

jQuery Range Column Charts & Graphs

  • HTML Code Samples
  • PHP Code Samples
  • ASP.NET Code Samples
  • JSP Code Samples
  • Spring MVC Code Samples
  • Dashboard 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

Previous Next
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); }

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.

© fenopix
  • Download Free Trial
  • Documentation
  • Blog
  • Privacy Policy
Server-side Technologies
  • ASP.NET MVC Charts
  • PHP Charts
  • JSP Charts
  • Spring MVC Charts
Front-end Technologies
  • JavaScript Charts
  • jQuery Charts
  • React Charts
  • Angular Charts
Contact
  • FAQs
  • Sales Enquiries
  • Support Forum
  • Careers