jQuery Box And Whisker Charts & Graphs

Download jQuery Chart Samples

Box and Whisker Charts, also known as Box Plots are used to show the distribution of numerical data through their quartiles, highlighting the median / mean values. Given example shows simple jQuery Box and Whisker Chart along with 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 options = {
	animationEnabled: true,
	title: {
		text: "Annual Salary Range - UK"
	},
	axisY: {
		title: "Annual Salary (in British Pound)",
		prefix: "£",
		interval: 35000
	},
	data: [{
		type: "boxAndWhisker",
		upperBoxColor: "#68D46F",
		lowerBoxColor: "#8062EF",
		color: "black",
		yValueFormatString: "£#,##0",
		dataPoints: [
			{ label: "Data Scientist", y: [26109, 30000, 46000, 59119, 38455] },
			{ label: "Web Developer", y: [16734, 20000, 31000, 37167, 24901] },
			{ label: "System Analyst", y: [20964, 25000, 38000, 45238, 30060] },
			{ label: "Application Engineer", y: [20176, 24000, 34000, 39821, 29035] },
			{ label: "Aerospace Engineer", y: [22255, 26000, 40000, 52153, 31935] },
			{ label: "Research Scientist", y: [21555, 26000, 35000, 40517, 30178] }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

}

Chart Customizations

The stem and whisker can be customized using stemColor, stemThickness, whiskerColor properties. You can also customize the color of the box using upperBoxColor & lowerBoxColor. Other related customization options are color, lineColor, lineDashType, lineThickness, etc.

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