• What is a Boxplot chart?
• What is a Boxplot used for?
• Boxplot charts vs bar charts
• BoxPlot Data Format
• Customizing the colors of boxPlot
  • Boxplot Interquartile Range Color
  • Horizontal BoxPlot
  • Adding scatter series as outliers

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 5-dimension vector [Min, Q1, Median, Q3, Max] format. To create a multi-dimensional vector value, you can use a column's combination property as given in the below example:

$data = [
    [
        'month',
        'min',
        'per25',
        'median',
        'per75',
        'max',
    ],
    [
        "Jan 2015",
        54,
        66,
        69,
        75,
        88
    ],
    [
        "Jan 2016",
        43,
        65,
        69,
        76,
        81
    ],
    ...
];
\koolreport\apexcharts\BoxPlotChart::create(array(
    "dataSource" => $data,
    "columns" => array(
        "month" => [
            "label" => "Month"
        ],
        'boxplot' => [
            'combination' => [
                'min',
                'per25',
                'median',
                'per75',
                'max',
            ]
        ]
    ),  

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

'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.

'options' => [
    '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.

\koolreport\apexcharts\ComboChart::create(array(
    "columns" => array(
        "datetime" => [
            "categoryType" => "datetime"
        ],
        'boxplot' => [
            'combination' => [
                'min',
                'per25',
                'median',
                'per75',
                'max',
            ],
            'chartType' => 'boxPlot',
        ],
        'outliers' =>  [
            'combination' => [
                'scatter_x',
                'scatter_y',
            ],
            'chartType' => 'scatter',
        ],
    ),

An example of a box-plot chart with outliers.