jQuery Column Charts & Graphs

Download jQuery Chart Samples

Column charts are rectangular bars with lengths proportional to the values that they represent. Column Charts are sometimes referred as Vertical Bar Charts. The given example shows simple jQuery Column Chart along with HTML source code that you can edit in-browser or save to run locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

//Better to construct options first and then pass it as a parameter
var options = {
	title: {
		text: "Column Chart in jQuery CanvasJS"              
	},
	data: [              
	{
		// Change type to "doughnut", "line", "splineArea", etc.
		type: "column",
		dataPoints: [
			{ label: "apple",  y: 10  },
			{ label: "orange", y: 15  },
			{ label: "banana", y: 25  },
			{ label: "mango",  y: 30  },
			{ label: "grape",  y: 28  }
		]
	}
	]
};

$("#chartContainer").CanvasJSChart(options);
}

Chart Customizations

dataPointWidth & color properties can be used to customize the color & width of columns. Other frequently used customization options are animationEnabled, theme, indexLabel, etc.

Note   For step by step instructions, follow our jQuery Integration Tutorial