BoxPlot

What is a Boxplot chart?

A Boxplot chart is a visual representation displaying a given statistical data set based on a five-number summary: the minimum, the first quartile (25th percent), the median (second quartile), the third quartile (75th percent), and the maximum. Such charts are extremely useful for comparing distributions of values across categories. The Boxplot is also referred to as box plot, box-and-whisker plot, box-and-whisker diagram.

These charts contain boxes and whiskers (vertical or horizontal lines that extend from the minimum to Quartile 1 and from Quartile 3 to the maximum).

What is a Boxplot used for?

The Boxplots provide a concise and comprehensible summary of potentially large data sets. They serve as a simple way to visualize the statistical distribution and spread of values in your dataset, showing the five-number summary of this data in different boxplot shapes and positions. The Boxplot chart is also used for comparing those values across categories.
Keep in mind that you can create a Boxplot using fewer measures as well. For instance, you can visualize just the minimum, median, and maximum.

Boxplot charts vs bar charts

The main difference between Box plot charts and bar charts is that Box plots are useful with ratio/quantitative variables. They deal with medians and quartiles.

Whereas Bar charts and graphs are useful for qualitative/categorical variables. They deal with counts.

In this Boxplot Chart Guide, we will go through the data formats for Boxplot charts. We will also show you how to create a basic boxplot chart with some example code and how to customize it further exploring different options.

BoxPlot Data Format

The data format for boxPlot is slightly different than other charts. ApexCharts assumes that your data is in the [Min, Q1, Median, Q3, Max] format as given in the below example.

xy Format

The xy format accepts [{ x: category/date, y: [min, q1, median, q3, max] }].

chart: { type: "boxPlot" }, series: [{ data: [{ x: "category 1", y: [40, 51.98, 56.29, 59.59, 63.85] }, { x: "category 2", y: [43.66, 44.99, 51.35, 52.95, 59.42] }, . . . { x: "category n", y: [52.76, 57.35, 59.15, 63.03, 67.98] }] }]

Customizing the colors of boxPlot

Boxplot Interquartile Range Color

By default, the upward quartile has a green color and the downward quartile has a blue color. You can change these colors by setting the below options

plotOptions: {
  boxPlot: {
    colors: {
      upper: '#5C4742',
      lower: '#A5978B'
    }
  }
}

The above color setting will produce the following result

Horizontal BoxPlot

The boxplot can be rendered horizontally just by changing a single property.

plotOptions: {
  bar: {
    horizontal: true
  }
}

An example of a horizontal box-plot chart.

Adding scatter series as outliers

If you need to add outliers to the boxplot, you will need to do that via another series as scatter chart-type. The below code gives an illustration of what might the code look like.

chart: {
  type: 'boxPlot'
},
series: [{
  type: 'boxPlot'
  data: [...],
}, {
  type: 'scatter',
  data: [...]
}]

An example of a box-plot chart with outliers.