JavaScript Error Bar Charts & Graphs

Download JavaScript Chart Samples

Error Charts lets you see margins of error or confidence level at a glance. Error Graph when combined with Bar Chart is referred to as Error Bar Chart. Given example shows Error Chart combined with Bar Chart. Error Graphs support Animation, Zooming, Panning, Events, Exporting as Image & are Cross-Browser Compatible. It also contains 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,
	title:{
		text: "QOS - Survey Result"
	},
	axisY:{
		title: "Response values",
		includeZero: true,
		interval: 10
	},
	toolTip: {
		shared: true
	},
	data: [{
			type: "bar",
			name: "Avg. Score",
			toolTipContent: "<b>{label}</b> <br> <span style=\"color:#4F81BC\">{name}</span>: {y}",
			dataPoints: [
				{ y: 94, label: "Order Accuracy" },
				{ y: 74, label: "Packaging" },
				{ y: 80, label: "Quantity" },
				{ y: 88, label: "Quality" },
				{ y: 76, label: "Delivery" }
			]
		},
		{
			type: "error",
			name: "Variability Range",
			toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y[0]} - {y[1]}",
			dataPoints: [
				{ y: [92, 98], label: "Order Accuracy" },
				{ y: [70, 78], label: "Packaging" },
				{ y: [78, 85], label: "Quantity" },
				{ y: [85, 92], label: "Quality" },
				{ y: [72, 78], label: "Delivery" }
			]
	}]
});
chart.render();

}

Chart Customizations

You can use linkedDataSeriesIndex to link an error series to any other data series in chart. Other frequently used customization options are stemColor, whiskerThickness, color, etc.