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: ''
        },

        legend: {
            enabled: false
        },
         plotOptions: {
            boxplot: {
                fillColor: '#f8f8ff',
                lineWidth: 2,
                medianColor: '#0C5DA5',
                medianWidth: 3
            }
        },


        xAxis: {
            categories: ["Sept'16","Oct'16-Nov'16","Oct'16-Dec'16","Nov'17","Dec'16"],
            title: {
                text: 'Delivery'
            }
        },

        yAxis: {
        		min: 0,
            title: {
                text: 'Price'
            },
            plotLines: [{
                value: 11,
                color: 'black',
                width: 1,
                label: {
                    text: 'MEAN: 11',
                    align: 'left',
                    style: {
                        color: 'gray'
                    }
                }
            }]
        },

        series: [{
            name: 'Deliveries',
            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>Delivery {point.key}</em><br/><br><small>12345 observations </small>  <br>'
            }
        }]

    });
});