JavaScript Column Charts & Graphs

Download JavaScript Chart Samples

Column charts use rectangular bars to compare value between different categories/series. Column Charts are sometimes referred to as Vertical Bar Charts. In order to make it easier to differentiate, we call vertical ones as Column Charts and Horizontal ones as Bar Charts. Charts are interactive, support animation, zooming, panning & exporting as image. Given example shows JavaScript Column Chart along with HTML source code that you can edit in-browser or save to run it locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	title:{
		text: "Top Oil Reserves"
	},
	axisY: {
		title: "Reserves(MMbbl)"
	},
	data: [{        
		type: "column",  
		showInLegend: true, 
		legendMarkerColor: "grey",
		legendText: "MMbbl = one million barrels",
		dataPoints: [      
			{ y: 300878, label: "Venezuela" },
			{ y: 266455,  label: "Saudi" },
			{ y: 169709,  label: "Canada" },
			{ y: 158400,  label: "Iran" },
			{ y: 142503,  label: "Iraq" },
			{ y: 101500, label: "Kuwait" },
			{ y: 97800,  label: "UAE" },
			{ y: 80000,  label: "Russia" }
		]
	}]
});
chart.render();

}

Chart Customizations

You can easily change the color of dataPoint using color property or change its width using dataPointWidth. Some other customizations include using indexLabel, theme, animationEnabled, etc.