JSFiddle - React, Tailwind, and code Playground

by Joanna Sobańska

HTML

<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/exporting.js"></script>

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

JavaScript

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

        chart: {
            type: 'boxplot'
        },

        title: {
            text: 'Time of waiting in Ports'
        },

        legend: {
            enabled: false
        },
         plotOptions: {
            boxplot: {
                fillColor: "rgb(92,166,211)",
                lineWidth: 2,
                medianColor: '#0C5DA5',
                medianWidth: 3,
                stemColor: 'rgb(82,233,230)',
                stemDashStyle: 'dot',
                stemWidth: 3,
                whiskerColor: '#rgb(37,102,118)',
                whiskerLength: '20%',
                whiskerWidth: 3
            }
        },


        xAxis: {
            categories: ['Bahia', 'Paranagua', 'Santos', 'Tubarao', 'Barcarena'],
            title: {
                text: 'Ports.'
            }
        },

        yAxis: {
        		min: 0,
            title: {
                text: 'Time of waiting'
            },
            plotLines: [{
                value: 10,
                color: '#0C5DA5',
                width: 1,
                label: {
                    text: 'MEAN: 10',
                    align: 'left',
                    style: {
                        color: 'gray'
                    }
                }
            }]
        },

        series: [{
            name: 'Observations',
            data: [
                [3, 4, 7, 8, 10],
                [5, 14, 17, 18, 31],
               	[13, 20, 22, 24, 29],
                [4, 17, 18, 21, 30],
                [1, 4, 7, 12, 22],
            ],
            tooltip: {
                headerFormat: '<em>Port{point.key}</em><br/>'
            }
        }]

    });
});