JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'boxplot',
            inverted: true
        },

        title: {
            text: 'Sample Base Salary Range'
        },

        legend: {
            enabled: false
        },

        xAxis: {
            categories: ['4', '3', '2', '1', '0'],
            title: {
                text: 'Job Level'
            }
        },

        yAxis: {
            title: {
                text: 'Base Salary'
            }
        },

        plotOptions: {
            boxplot: {
                fillColor: '#F0F0E0',
                lineWidth: 2,
                medianColor: '#0C5DA5',
                medianWidth: 3
            }
        },

        series: [{
            name: "Observation Data",
            data: [
{x: '0', low: 68, q1: 75, median: 79, q3: 82, high: 84, mean: 77.6},  //level 4 - category 0
{x: '1', low: 53, q1: 63, median: 68, q3: 72, high: 75, mean: 66.2},  //level 3 - category 1
{x: '2', low: 47, q1: 52, median: 59, q3: 64, high: 67, mean: 57.8},  //level 2 - category 2
{x: '3', low: 35, q1: 37, median: 39, q3: 42, high: 46, mean: 39.8},  //level 1 - category 3
{x: '4', low: 32, q1: 33, median: 34, q3: 38, high: 40, mean: 35.4}   //level 0 - category 4
            ],
            tooltip: {
                headerFormat: '<b>{point.series.name}</b><br/><em>Job Level: {point.x}</em><br/>',
                pointFormat:  '- Min: {point.low}<br/>' +
                              '- Q1: {point.q1}<br/>' +
                              '- Median: {point.median}<br/>' +
                              '- Q3: {point.q3}<br/>' +
                              '- Max: {point.high}<br/>' +
                              '- Mean: {point.mean}<br/>'
            }
        }, {
            name: "Outlier Data",
            color: Highcharts.getOptions().colors[0],
            type: 'scatter',
            data: [ // x, y positions where 0 is the first category
                [0, 74],
    ...