Loading
Creating Box and Whisker Chart
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:
-
Create a simple box and whisker chart
-
Use legends in the box and whisker chart
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:
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 |
|---|---|
|
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 |
|
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 |
|
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 |
|
It is used to specify a comma-separated list of values for each item in the dataset. This attribute belongs to the The comma is the default data-separator. You can explicitly specify the data-separator using the |
The data structure needed to create a box and whisker chart is given below:
{
"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"
}
]
}
]
}There! You have now seen how you can create a simple box and whisker chart.