JavaScript Error Charts & Graphs

Download JavaScript Chart Samples

JavaScript Error Charts are used to show uncertainty or variability of data and used on graphs to indicate the same in reported measurement. Error Graphs can be combined with all charts with axis including Line, Column, Bar, Area etc. It supports animation, zooming, panning, and renders across all browsers & devices. Given example shows a JavaScript Error Chart with Column Chart. It also contains JavaScript source code that you can edit in-browser or save to run locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {
	
var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Average Lifespan of a Machinery"
	},
	axisY:{
		title: "Lifespan (in Years)"
	},
	toolTip: {
		shared: true
	},
	data: [{
		type: "column",
		name: "Avg. Lifespan",
		toolTipContent: "{label} <br> <b>{name}:</b> {y} years",
		dataPoints: [
			{ y: 14, label: "Washing Machine" },
			{ y: 16, label: "Refrigerator" },
			{ y: 12, label: "Water Heater" },
			{ y: 35, label: "Boilers" },
			{ y: 11, label: "Television" },
			{ y: 18, label: "AC" },
			{ y: 9, label: "Dishwasher" }
		]
	},
	{
		type: "error",
		name: "Variability ",
		toolTipContent: "<b>{name}:</b> {y[0]} - {y[1]} years",
		dataPoints: [
			{ y: [13, 16], label:"Washing Machine" },
			{ y: [14, 17], label:"Refrigerator" },
			{ y: [9, 13], label:"Water Heater" },
			{ y: [30, 36], label:"Boilers" },
			{ y: [9, 12], label:"Television" },
			{ y: [15, 20], label:"AC" },
			{ y: [8, 10], label:"Dishwasher" }
			
		]
	}]
});
chart.render();

}

Chart Customizations

You can change the color of the stems and the whisker by using the stemColor & whiskerColor properties. Other commonly used customization options are, color, whiskerDashType, etc.