JavaScript Box & Whisker Charts with Custom Colors

Download JavaScript Chart Samples

You can easily customize Box And Whisker Charts through options provided by CanvasJS. Upper & Lower boxes can be customized with varying colors. Library also provides options to modify Median / Mean line, Whisker and Stem by changing its color or thickness. Given example shows Box and Whisker Chart with customized color for upper and lower box. 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: "Annual Salary Range - USA"
	},
	axisY: {
		title: "Annual Salary (in USD)",
		prefix: "$",
		interval: 40000
	},
	data: [{
		type: "boxAndWhisker",
		upperBoxColor: "#FFC28D",
		lowerBoxColor: "#9ECCB8",
		color: "black",
		yValueFormatString: "$#,##0",
		dataPoints: [
			{ label: "Registered Nurse", y: [46360, 55320, 82490, 101650, 71000] },
			{ label: "Web Developer", y: [83133, 91830, 115828, 128982, 101381] },
			{ label: "System Analyst", y: [51910, 60143, 115056, 135450, 85800] },	
			{ label: "Application Engineer", y: [63364, 71653, 91120, 100556, 80757] },
			{ label: "Aerospace Engineer", y: [82725, 94361, 118683, 129191, 107142] },
			{ label: "Dentist", y: [116777, 131082, 171679, 194336, 146794] }
		]
	}]
});
chart.render();

}

Chart Customizations

upperBoxColor, lowerBoxColor, lineColor properties can be used to customize the box as required. The stem and whiskers can be customized as well using the properties stemColor, whiskerColor, stemThickness. Other related customization options are color,lineDashType, lineThickness, etc.