JavaScript Box And Whisker Charts & Graphs

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. Box Plots can have lines extending vertically from the boxes with horizontal line on extremes (Whiskers) indicating variability outside the upper and lower quartiles. Box And Whisker graphs are interactive, support animation, exporting as image, etc. Given example shows simple Box and Whisker Chart along with source code that you can edit in-browser or save to run it locally.

Try Editing The Code

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Daily Sleep Statistics of Age Group 12 - 20"
	},
	axisX: {
		valueFormatString: "DDD"
	},
	axisY: {
		title: "Sleep Time (in Hours)"
	},
	data: [{
		type: "boxAndWhisker",
		xValueFormatString: "DDDD",
		yValueFormatString: "#0.0 Hours",
		dataPoints: [
			{ x: new Date(2017, 6, 3),  y: [4, 6, 8, 9, 7] },
			{ x: new Date(2017, 6, 4),  y: [5, 6, 7, 8, 6.5] },
			{ x: new Date(2017, 6, 5),  y: [4, 5, 7, 8, 6.5] },
			{ x: new Date(2017, 6, 6),  y: [3, 5, 6, 9, 5.5] },
			{ x: new Date(2017, 6, 7),  y: [6, 8, 10, 11, 8.5] },
			{ x: new Date(2017, 6, 8),  y: [5, 7, 9, 12, 7.5] },
			{ x: new Date(2017, 6, 9),  y: [4, 6, 8, 9, 7] }
		]
	}]
});
chart.render();

}

Related Customization

You can set the color for the upper box and the lower box by using upperBoxColor and lowerBoxColor. Also you can customize whisker or stem using properties like whiskerColor, whiskerThickness, stemColor, color, etc.