JSFiddle - React, Tailwind, and code Playground

by Nalin Sajwan

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/drilldown.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: '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: [
                {
                		"id": "id_1",
                    "name": "id_1",
                    "drilldown": "id_1-1",
                    "low": 760,
                    "q1": 801,
                    "median": 848,
                    "q3": 895,
                    "high": 965
                },
                {
                    "low": 733,
                    "q1": 853,
                    "median": 939,
                    "q3": 980,
                    "high": 1080
                },
                {
                    "low": 714,
                    "q1": 762,
                    "median": 817,
                    "q3": 870,
                    "high": 918
                },
                {
                    "low": 724,
                    "q1": 802,
                    "median": 806,
                    "q3": 871,
                    "high": 950
                },
                {
                    "low": 834,
                    "q1": 836,
                    "median": 864,
                    "q3": 882,
                    "high":...