jQuery Bar Charts & Graphs

Download jQuery Chart Samples

jQuery Bar charts use rectangular bars to compare value between different categories/series. In order to make it easier to differentiate, we call Horizontal ones as Bar Charts and Vertical ones as Column Charts. Below example shows simple jQuery Bar 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 () {

//Better to construct options first and then pass it as a parameter
var options = {
	animationEnabled: true,
	title: {
		text: "Mobile Phones Used For",                
		fontColor: "Peru"
	},	
	axisY: {
		tickThickness: 0,
		lineThickness: 0,
		valueFormatString: " ",
		includeZero: true,
		gridThickness: 0                    
	},
	axisX: {
		tickThickness: 0,
		lineThickness: 0,
		labelFontSize: 18,
		labelFontColor: "Peru"				
	},
	data: [{
		indexLabelFontSize: 26,
      		toolTipContent: "<span style=\"color:#62C9C3\">{indexLabel}:</span> <span style=\"color:#CD853F\"><strong>{y}</strong></span>",
		indexLabelPlacement: "inside",
		indexLabelFontColor: "white",
		indexLabelFontWeight: 600,
		indexLabelFontFamily: "Verdana",
		color: "#62C9C3",
		type: "bar",
		dataPoints: [
			{ y: 21, label: "21%", indexLabel: "Video" },
			{ y: 25, label: "25%", indexLabel: "Dining" },
			{ y: 33, label: "33%", indexLabel: "Entertainment" },
			{ y: 36, label: "36%", indexLabel: "News" },
			{ y: 42, label: "42%", indexLabel: "Music" },
			{ y: 49, label: "49%", indexLabel: "Social Networking" },
			{ y: 50, label: "50%", indexLabel: "Maps/ Search" },
			{ y: 55, label: "55%", indexLabel: "Weather" },
			{ y: 61, label: "61%", indexLabel: "Games" }
		]
	}]
};

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

Chart Customizations

Index / Data Labels can be enabled for each bar using indexLabel property. Other commonly used customization options are indexLabelOrientaion, dataPointWidth, animationEnabled, etc.

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