To render a box and whisker chart, use series type as BoxAndWhisker and inject
BoxAndWhiskerSeries module using Chart.Inject(BoxAndWhiskerSeries) method. The field y requires n number of data or it should contains minimum of five values to plot a segment.
var chart = new ej.charts.Chart({
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'Category',
},
//Initializing Chart Series
series: [
{
type: 'BoxAndWhisker',
dataSource: [
{ x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
{ x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
{ x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
{ x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
{ x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
{ x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
{ x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
{ x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
{ x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
],
xName: 'x',
yName: 'y',
marker: {
visible: true,
width: 10,
height: 10
},
}
],
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>You can change the rendering mode of the Box and Whisker series using the boxPlotMode property.
The default boxPlotMode is exclusive.The other boxPlotMode available are inclusive and normal.
var chart = new ej.charts.Chart({
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'Category',
},
//Initializing Chart Series
series: [
{
type: 'BoxAndWhisker',
boxPlotMode: 'Normal',
dataSource: [
{ x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
{ x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
{ x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
{ x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
{ x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
{ x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
{ x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
{ x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
{ x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
],
xName: 'x',
yName: 'y',
marker: {
visible: true,
width: 10,
height: 10
},
}
],
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>In Box and Whisker series showMean property is used to show the box and whisker average value. The default value of showMean is false.
var chart = new ej.charts.Chart({
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'Category',
},
//Initializing Chart Series
series: [
{
type: 'BoxAndWhisker',
dataSource: [
{ x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
{ x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
{ x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
{ x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
{ x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
{ x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
{ x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
{ x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
{ x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
],
showMean: false,
xName: 'x',
yName: 'y',
}
],
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>