HTML5 Box and Whisker Charts

Box and Whisker Chart is a form of Column Chart representing lower quartile, upper quartile and median / mean with vertical lines representing minimum and maximum. It creates two boxes between upper / lower quartiles and the median / mean.

Cannot be combined with: Doughnut, Pie, Funnel, Pyramid, Bar, Stacked Bar charts.




Box and Whisker Specific Properties

Applies To Attribute Type Default Options/Examples
dataSeries upperBoxColor String “white” “red”,”#1E990F”
dataSeries lowerBoxColor String white “red”,”#1E990F”
dataSeries whiskerColor String dataSeries Color “blue”, “#006400”
dataSeries whiskerLength Number/String Automatically Calculated 10, “80%”..
dataSeries whiskerThickness Number Automatically Calculated 0,1,2,3..
dataSeries whiskerDashType String “solid” “dot”, “dash” etc.
dataSeries stemColor String dataSeries Color “blue”, “#006400”
dataSeries stemThickness Number Automatically Calculated 0,1,2,3..
dataSeries stemDashType String “solid” “dot”, “dash” etc.


Basic Box and Whisker Chart

Try it Yourself by Editing the Code below.


Box and Whisker Chart With Additional Customization

Try it Yourself by Editing the Code below.





If you have any questions, please feel free to ask in our forums.Ask Question