A box and whisker chart is used to examine a given set of data and draw the statistical conclusion using the five-number summary principle.

In this section, you will be shown how you can:

## Creating a Simple Box and Whisker Chart

As an example, we will create a box and whisker chart that shows the gender-wise distribution of annual salaries.

The box and whisker chart thus created looke like this:

{ "chart": { "caption": "Distribution of annual salaries", "subCaption": "By Gender", "xAxisName": "Pay Grades", "YAxisName": "Salaries (In USD)", "numberPrefix": "\$", "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00", "bgColor": "#ffffff", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0", "showBorder": "0", "showCanvasBorder": "0", "showAlternateHGridColor": "0", "legendBorderAlpha": "0", "legendShadow": "0", "legendPosition": "right", "showValues": "0", "toolTipColor": "#ffffff", "toolTipBorderThickness": "0", "toolTipBgColor": "#000000", "toolTipBgAlpha": "80", "toolTipBorderRadius": "2", "toolTipPadding": "5" }, "categories": [ { "category": [ { "label": "Grade 1" }, { "label": "Grade 2" }, { "label": "Grade 3" } ] } ], "dataset": [ { "seriesname": "Male", "lowerBoxColor": "#0075c2", "upperBoxColor": "#1aaf5d", "data": [ { "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000" }, { "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500" }, { "value": "15000,19000,25000,32000,50000,65000" } ] }, { "seriesname": "Female", "lowerBoxColor": "#f45b00", "upperBoxColor": "#f2c500", "data": [ { "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000" }, { "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000" }, { "value": "24000,32000,35000,37000,39000, 58000" } ] } ] }
``````{
"chart": {
"caption": "Distribution of annual salaries",
"subCaption": "By Gender",
"YAxisName": "Salaries (In USD)",
"numberPrefix": "\$",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
"bgColor": "#ffffff",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"showCanvasBorder": "0",
"showAlternateHGridColor": "0",
"legendBorderAlpha": "0",
"legendPosition": "right",
"showValues": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
},
"categories": [
{
"category": [
{
},
{
},
{
}
]
}
],
"dataset": [
{
"seriesname": "Male",
"lowerBoxColor": "#0075c2",
"upperBoxColor": "#1aaf5d",
"data": [
{
"value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000"
},
{
"value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500"
},
{
"value": "15000,19000,25000,32000,50000,65000"
}
]
},
{
"seriesname": "Female",
"lowerBoxColor": "#f45b00",
"upperBoxColor": "#f2c500",
"data": [
{
"value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000"
},
{
"value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000"
},
{
"value": "24000,32000,35000,37000,39000, 58000"
}
]
}
]
}``````
``````<html>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
var fusioncharts = new FusionCharts({
type: 'boxandwhisker2d',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Distribution of annual salaries",
"subCaption": "By Gender",
"YAxisName": "Salaries (In USD)",
"numberPrefix": "\$",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
"bgColor": "#ffffff",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"showCanvasBorder": "0",
"showAlternateHGridColor": "0",
"legendBorderAlpha": "0",
"legendPosition": "right",
"showValues": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
},
"categories": [{
"category": [{
}, {
}, {
}]
}],
"dataset": [{
"seriesname": "Male",
"lowerBoxColor": "#0075c2",
"upperBoxColor": "#1aaf5d",
"data": [{
"value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000"
}, {
"value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500"
}, {
"value": "15000,19000,25000,32000,50000,65000"
}]
}, {
"seriesname": "Female",
"lowerBoxColor": "#f45b00",
"upperBoxColor": "#f2c500",
"data": [{
"value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000"
}, {
"value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000"
}, {
"value": "24000,32000,35000,37000,39000, 58000"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>``````

In the chart shown above, note that the minimum and maximum values and the median are displayed by default, whereas the upper and lower quartile values are hidden.

Given below is a brief description of the attributes used to create a box and whisker chart:

Attribute Name Description

`seriesName`

It is used to specify the series name for a dataset. For example, you can name the dataset for the male employee salaries ‘Male’. This attribute belongs to the `dataset` object.

`lowerBoxColor`

It is used to specify the hex code of the color that will be used to render the lower quartile box. This attribute belongs to the `dataset` object.

`upperBoxColor`

It is used to specify the hex code of the color that will be used to render the upper quartile box. This attribute belongs to the `dataset` object.

`value`

It is used to specify a comma-separated list of values for each item in the dataset. This attribute belongs to the `data` object, which belongs to the `dataset` object.

The comma is the default data-separator. You can explicitly specify the data-separator using the `dataSeparator` attribute. For example, `"dataSeparator”: "|”`. This attribute belongs to the `data` object, which belongs to the `dataset` object.

## Legends in Box and Whisker chart

FusionCharts Suite XT supports `legend` for the box and whisker chart. Legend allows you to display single color icons for numberic numbers.

A simple box and whisker chart rendered with a legend looks like this:

{ "chart": { "caption": "Distribution of annual salaries", "subCaption": "By Gender", "xAxisName": "Pay Grades", "YAxisName": "Salaries (In USD)", "numberPrefix": "\$", "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00", "bgColor": "#ffffff", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0", "showBorder": "0", "showCanvasBorder": "0", "showAlternateHGridColor": "0", "legendBorderAlpha": "0", "legendShadow": "0", "legendPosition": "right", "showValues": "0", "toolTipColor": "#ffffff", "toolTipBorderThickness": "0", "toolTipBgColor": "#000000", "toolTipBgAlpha": "80", "toolTipBorderRadius": "2", "toolTipPadding": "5" }, "categories": [ { "category": [ { "label": "Grade 1" }, { "label": "Grade 2" }, { "label": "Grade 3" } ] } ], "dataset": [ { "seriesname": "Male", "lowerBoxColor": "#0075c2", "upperBoxColor": "#1aaf5d", "data": [ { "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000" }, { "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500" }, { "value": "15000,19000,25000,32000,50000,65000" } ] }, { "seriesname": "Female", "lowerBoxColor": "#f45b00", "upperBoxColor": "#f2c500", "data": [ { "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000" }, { "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000" }, { "value": "24000,32000,35000,37000,39000, 58000" } ] } ] }
``````{
"chart": {
"caption": "Distribution of annual salaries",
"subCaption": "By Gender",
"YAxisName": "Salaries (In USD)",
"numberPrefix": "\$",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
"bgColor": "#ffffff",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"showCanvasBorder": "0",
"showAlternateHGridColor": "0",
"legendBorderAlpha": "0",
"legendPosition": "right",
"showValues": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
},
"categories": [
{
"category": [
{
},
{
},
{
}
]
}
],
"dataset": [
{
"seriesname": "Male",
"lowerBoxColor": "#0075c2",
"upperBoxColor": "#1aaf5d",
"data": [
{
"value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000"
},
{
"value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500"
},
{
"value": "15000,19000,25000,32000,50000,65000"
}
]
},
{
"seriesname": "Female",
"lowerBoxColor": "#f45b00",
"upperBoxColor": "#f2c500",
"data": [
{
"value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000"
},
{
"value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000"
},
{
"value": "24000,32000,35000,37000,39000, 58000"
}
]
}
]
}``````
``````<html>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
var fusioncharts = new FusionCharts({
type: 'boxandwhisker2d',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Distribution of annual salaries",
"subCaption": "By Gender",
"YAxisName": "Salaries (In USD)",
"numberPrefix": "\$",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
"bgColor": "#ffffff",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"showCanvasBorder": "0",
"showAlternateHGridColor": "0",
"legendBorderAlpha": "0",
"legendPosition": "right",
"showValues": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
},
"categories": [{
"category": [{
}, {
}, {
}]
}],
"dataset": [{
"seriesname": "Male",
"lowerBoxColor": "#0075c2",
"upperBoxColor": "#1aaf5d",
"data": [{
"value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000"
}, {
"value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500"
}, {
"value": "15000,19000,25000,32000,50000,65000"
}]
}, {
"seriesname": "Female",
"lowerBoxColor": "#f45b00",
"upperBoxColor": "#f2c500",
"data": [{
"value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000"
}, {
"value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000"
}, {
"value": "24000,32000,35000,37000,39000, 58000"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>``````

Given below is a brief description of the attributes used to display legend in a box and whisker chart:

Attribute Name Description

`showLegend`

Whether to show legend on the chart. Set it to `1` to show the legend or to `0` to hide it.

`legendPosition`

The legend can be plotted at two positions on the chart - below the chart for value `bottom` and to the right of the chart for value `right`.

`legendBorderAlpha`

Border alpha for the legend. It can take values from `0`(transparent) to `100`(opaque).

`legendShadow`

Whether to show a shadow for legend. Set it to `1` to show shadow and `0` to hide it.

Top