JavaScript Box And Whisker Chart with Outliers

Download JavaScript Chart Samples

Outliers are the values lying beyond the minimum and maximum value of a data point. Any data not included between the whiskers should be plotted as an outlier and are usually represented with a circle or cross. You can add a scatter series in the chart to show outlier values. Given example shows Box And Whisker Charts with Outliers values represented by a scatter graph. 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,
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	title:{
		text: "Michelson - Morley Experiment"
	},
	subtitles: [{
		text: "Speed = (Given Value + 299,000) km/s",
		fontSize: 15
	}],
	axisY: {
		title: "Readings (in km/s)",
		tickLength: 0,
		gridDashType: "dash",
		stripLines: [{
			value: 792.5,
			label: "True Speed",
			labelFontColor: "#FF0800",
			showOnTop: true,
			labelAlign: "center",
			color: "#FF0800"
		}]
	},
	legend: {
		cursor: "pointer",
		itemclick: toggleDataSeries
	},
	data: [{
		type: "boxAndWhisker",
		toolTipContent: "<span style=\"color:#6D78AD\">{label}:</span> <br><b>Maximum:</b> {y[3]},<br><b>Q3:</b> {y[2]},<br><b>Median:</b> {y[4]}<br><b>Q1:</b> {y[1]}<br><b>Minimum:</b> {y[0]}",
		yValueFormatString: "#####.0 km/s",
		dataPoints: [
			{ x: 0, label: "Experiment 1",  y: [740, 850, 980, 1070, 950] },
			{ x: 1, label: "Experiment 2",  y: [760, 800, 895, 960, 845] },
			{ x: 2, label: "Experiment 3",  y: [840, 840, 880, 910, 860] },
			{ x: 3, label: "Experiment 4",  y: [720, 762.5, 875, 920, 815] },
			{ x: 4, label: "Experiment 5",  y: [740, 802.5, 870, 950, 810] }
		]
	},
	{
		type: "scatter",
		name: "Outlier Values",
		toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y} km/s",
		showInLegend: true,
		dataPoints: [
			{ x: 0, label: "Experiment 1", y: 650 },
			{ x: 2, label: "Experiment 3", y: 620 },
			{ x: 2, label: "Experiment 3", y: 720 },
			{ x: 2, label: "Experiment 3", y: 720 },
			{ x: 2, label: "Experiment 3", y: 970 },
			{ x: 2, label: "Experiment 3", y: 950 }
		]
	}]
});
chart.render();

function toggleDataSeries(e) {
	if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	} else {
		e.dataSeries.visible = true;
	}
	e.chart.render();
}

}

Chart Customizations

You can change the markers of the outlier values by changing the markerType of the scatter series. Other frequently used customization options are markerSize, markerColor, markerBorderColor, etc.