Since v1.16, jsGraph support box charts. Box charts are a nice way to render statistical data, and is similar but more flexible than bar charts. While bar charts start at zero and display a cityscape till a certain value, plus potentially an error bar, box charts displays the median (second quartile, Q2), two box boundaries (first and third quartile, Q1 and Q3), and two whiskers that can take any data.
Note: jsGraph does not calculate those values itself. You can use mljs to do so. You must feed those values to jsGraph directly.
Defining the axis
The x axis can be a normal, decimal axis, or it can be a category axis created using the following code:
Alternatively, you can also overwrite the default x axis using:
For a more complete description on how to use the categories, you can check the bar charts tutorial. The example at the end of this tutorial provides a code sample featuring category axes.
Defining the box serie
To define a box serie, use the Graph.SERIE_BOX type, where Graph should be your constructor.
Maximum box width
Boxes width will be automatically determined so that they can fit the graph. However, there’s a default maximum width of 20px. You can use the maxBoxWidth option to change it:
Here are the default options of the box serie that can be overwritten during the serie creation.
All styling options are available through the API and can be checked in the documentation.
Here’s just a simple example of box styling for future references: