JavaScript code to generate box and whisker charts/graphs

The JavaScript Box & Whisker Chart aka Box Plot is used to show the distribution of numeric data through their quartiles, while highlighting the averages.

The box plot has lines extending vertically from the cells containing the horizontal line at the extremes (whiskers), representing the change outside the upper and lower quartiles. Box and Whisker charts are interactive, support animations, export charts as images, and more.

The example below illustrates a box and whisker chart/graph template created with JavaScript . The article also provides the source code for you to edit in the browser and save to your computer to run locally.

JavaScript code to generate box and whisker charts/graphs Picture 1

Source : CanvasJS

Tweak the chart

You are free to change the property settings to get the way you want to draw box and whisker charts. For example:

1. uperBoxColor: Choose a color for the box above
2. lowerBoxColor: Choose a color for the box below
3. whiskerColor: Choose a whisker color
4. whiskerThickness: Thickness of whisker
5. stemColor: Stem color (body)
6. Color: Color
7. .

Kareem Winters

Update 27 June 2023