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