Tutorials

Box and whisker plot: Understanding their structure and insights

by

Highsoft

5 minutes read

Box and whisker plot: Understanding their structure and insights

Box and whisker plots, also known as boxplots, are powerful statistical tools that provide a comprehensive view of data distribution. These plots are great for showing the spread, skewness, and potential outliers in datasets, making them invaluable for data analysis across various fields, from scientific research to financial analysis.

This blog post will guide you through the creation of a box and whisker plot chart using Highcharts. Whether you’re a developer working with JavaScript, .NET, React or other common frameworks, we’re confident you’ll find the inspiration you need.

Highcharts also integrates seamlessly with popular languages such as Python, R, PHP and Java, as well as mobile platforms like iOS and Android. Additional support for frameworks like Svelte, Angular, and Vue, makes it a versatile tool for various development environments.

To see more examples and get an even better understanding of the opportunities Highcharts offers, please head over to the demo section of our website or read up on the technical documentation on how to get started. Once you get the hang of it, the API reference will help you customize your charts in no time.

Understanding box plots

A box and whisker plot divides data into quartiles, providing a clear visualization of data distribution. The “box” represents the interquartile range (IQR), containing the middle 50% of the data, while the “whiskers” extend to show the rest of the distribution. This structure allows analysts to quickly identify patterns, trends, and unusual values in their data.

The key components of a box plot include:

Median line: The line dividing the box into two parts, representing the middle value
Box boundaries: The upper and lower quartiles (Q3 and Q1), containing 50% of the data
Whiskers: Lines extending from the box to show the remaining data within 1.5 times the IQR
Outliers: Individual points beyond the whiskers, representing unusual values

Creating a box plot and whisker plot with Highcharts

Go directly to the Highcharts demo page for “Box plot” to view its code, play around with different theme colors or edit it on JSFiddle or Codepen.

Let’s explore how to create this interactive box plot using Highcharts.

We’ll break down the implementation into clear steps.

Step 1: Load the required files and create a container

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

This structure provides the foundation for our chart and includes all necessary Highcharts modules, including the core library, additional features, and accessibility support.

highcharts-more.js is an additional module for Highcharts. This module extends the core functionality of Highcharts by adding support for more advanced chart types like box and whisker plot charts.

Step 2: Add some CSS to control the dimensions and styling

#container {
    height: 400px;
}

.highcharts-figure {
    min-width: 310px;
    max-width: 700px;
    margin: 1em auto;
}

Step 3: Implement the JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'boxplot'
    },
    title: {
        text: 'Highcharts Box Plot Example'
    },
    legend: {
        enabled: false
    },
    xAxis: {
        categories: ['1', '2', '3', '4', '5'],
        title: {
            text: 'Experiment No.'
        }
    },
    yAxis: {
        title: {
            text: 'Observations'
        },
        plotLines: [{
            value: 932,
            color: 'red',
            width: 1,
            label: {
                text: 'Theoretical mean: 932',
                align: 'center',
                style: {
                    color: 'gray'
                }
            }
        }]
    },
    series: [{
        name: 'Observations',
        data: [
            [760, 801, 848, 895, 965],
            [733, 853, 939, 980, 1080],
            [714, 762, 817, 870, 918],
            [724, 802, 806, 871, 950],
            [834, 836, 864, 882, 910]
        ],
        tooltip: {
            headerFormat: 'Experiment No {point.key}
'
        }
    }, {
        name: 'Outliers',
        color: Highcharts.getOptions().colors[0],
        type: 'scatter',
        data: [
            [0, 644],
            [4, 718],
            [4, 951],
            [4, 969]
        ],
        marker: {
            fillColor: 'white',
            lineWidth: 1,
            lineColor: Highcharts.getOptions().colors[0]
        },
        tooltip: {
            pointFormat: 'Observation: {point.y}'
        }
    }]
});

Understanding the code structure

The code configures several important aspects of the box plot:

Data structure: Each array represents the five-number summary for a box plot (minimum, Q1, median, Q3, maximum)
Outlier handling: A separate scatter series displays points beyond the whiskers
Reference line: A plot line shows the theoretical mean for comparison

Customization options

Highcharts offers numerous ways to customize box plots to meet specific visualization needs. The styling can be controlled through both the JavaScript configuration and CSS, allowing for precise control over the appearance and behavior of the chart.

Common customization areas include:

Box styles: Colors, width, and fill opacity of the boxes
Whisker appearance: Length, style, and color of the whiskers
Outlier markers: Shape, size, and color of outlier points

Best practices for box plots

Creating effective box plots requires careful consideration of data presentation and user experience. The visualization should make it easy to identify key statistical measures while highlighting any significant outliers or patterns in the data.

Key considerations for implementation include:

Data grouping: Organize related data points logically for meaningful comparison
Scale selection: Choose appropriate axis scales to show data variation clearly
Interactive features: Implement tooltips and hover states for detailed information

Advanced features and applications

Box plots can be enhanced with additional features to provide deeper insights. Interactive elements can allow users to explore the data in detail, while statistical overlays can provide context for analysis. The flexibility of Highcharts enables integration with other chart types and data sources for comprehensive data visualization.

Conclusion

Box and whisker plots are powerful tools for visualizing data distributions and identifying patterns. When implemented effectively using Highcharts, they provide valuable insights into data variability, central tendency, and potential outliers. Understanding how to create and customize these plots enables analysts to communicate complex statistical information clearly and effectively.

By following best practices and leveraging Highcharts’ capabilities, you can create informative and interactive box plots that help users understand and explore their data in meaningful ways.