JavaScript Box and Whiskers Chart

Example creates a traditional Box and Whiskers Chart using ChartXY, BoxSeries and PointSeries for outliers.

Box and Whiskers Chart provides a compact way of visually displaying distribution of data through quartiles.


The lines extending parallel from the boxes are known as the "whiskers", which are used to indicate variability outside the upper and lower quartiles.

Outliers are sometimes drawn as individual dots that are in-line with the whiskers.

Here are the types of observations one can make from viewing a Box And Whiskers Chart:

  • What the key values are, such as: average, median, 25th percentile etc.
  • If there are any outliers and what their values are.
  • Is the data symmetrical.
  • How tightly is the data grouped.
  • If the data is skewed and if so, in what direction.