React Box And Whisker Charts & Graphs

Download React Chart Samples

React Box & Whisker Charts or Box Plots are a convenient way to visually display groups of numerical data through their quartiles highlighting the median / mean value. Below example shows React Box & Whisker Chart along with source code that you can run locally.

/* App.js */
import React, { Component } from 'react';
import CanvasJSReact from '@canvasjs/react-charts';
//var CanvasJSReact = require('@canvasjs/react-charts');

var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
class App extends Component {
	render() {
		const options = {
			theme: "light2",
			animationEnabled: true,
			title:{
				text: "Energy in Baked Foods"
			},
			axisY: {
				title: "Energy Per 100 g (kcal/100g)"
			},
			data: [{
				type: "boxAndWhisker",
				yValueFormatString: "#,##0.# \"kcal/100g\"",
				dataPoints: [
					{ label: "Bread",  y: [179, 256, 300, 418, 274] },
					{ label: "Cake",  y: [252, 346, 409, 437, 374.5] },
					{ label: "Biscuit",  y: [236, 281.5, 336.5, 428, 313] },
					{ label: "Doughnut",  y: [340, 382, 430, 452, 417] },
					{ label: "Pancakes",  y: [194, 224.5, 342, 384, 251] },
					{ label: "Bagels",  y: [241, 255, 276.5, 294, 274.5] }
				]
			}]
		}
		return (
		<div>
			<CanvasJSChart options = {options}
				/* onRef={ref => this.chart = ref} */
			/>
			{/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
		</div>
		);
	}
}
export default App;

Chart Customizations

You can customize Box and Whisker chart using properties like whiskerLength, whiskerThickness, whiskerColor etc

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