JavaScript Box And Whisker Charts & Graphs

Download JavaScript Chart Samples

JavaScript Box & 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 chart as image, etc. Given example shows JavaScript Box & 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 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)",
		includeZero: true
	},
	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();

}

Chart Customizations

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.