JavaScript code to create box & whisker chart/graph templates with custom colors

You can easily customize box & whisker charts through the options provided by CanvasJS. You can easily edit the top and bottom boxes with different colors. The library also offers the option to change Median/Mean, Whisker and Stem lines by color and thickness.

The example below illustrates a box & whisker chart template with customizable top and bottom box colors created with JavaScript . You will also have the source code to edit in the browser or save to your computer to run locally.

Source: CanvasJS

Tweak the chart

If you want to create a box chart as you like, you can change the properties in the JavaScript code. For example:

1. upperBoxColor: Color of upper box
2. lowerBoxColor: Color of bottom box
3. lineColor: Line color
4. stemColor: Stem color
5. whiskerColor: Whisker color
6. stemThickness: Stem Thickness
7. color: Color
8. lineDashType: Dash style
9. lineThickness: Line thickness
10. …

Lesley Montoya

Update 27 June 2023