JSFiddle - React, Tailwind, and code Playground

by nagoba

HTML

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

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

JavaScript

var chart;
$(document).ready(function() {
 chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'scatter',
        reflow: false
    },
     title: {
            text: 'Box and Whisker Chart',
            
        },
     tooltip:{
         formatter: function(){
             var s = '<b>'+this.x+'</b><br>';
             for(var i=this.points.length-1;i>-1;i--){
                 colors = ["red","#444", "green", "#444", "blue"];
    s = s + ['<br>','<span style="color:' + colors[i] + '">', this.points[i].series.name, '</span>: ',
      '<b>', Highcharts.numberFormat(this.points[i].y, 0), '%</b>'].join('');
             }
             return s;    
         },
         shared:true      
     },
     legend:{
         enabled:false
     },
    xAxis:{
        categories:['Value 1', 'Value 2']
    },
    yAxis:{
        labels:{
            formatter: function(){ return this.value + "%"}
        }            
    },
                
    plotOptions:{
       series: {
                marker: {
                    states: {
                        hover: {
                            enabled: false
                        }
                    }
                }
            }
    },
                
    series: [{
    name:'Minimum',
    marker:{enabled:true},
    data:[-20,1]
        },
        {
                
    name:'Q1',
    marker:{enabled:true},
    data:[-10,4]
        },
     {
    name:'Median',
    marker:{enabled:true},
    data:[5,10]
        },{
    name:'Q3',
    marker:{enabled:true},
    data:[12,15]
        },
                 {
    name:'Maximum',
    marker:{enabled:true},
    data:[20,25]
        },
    ]
}, function(chart) {
    var min = chart.series[0].data;
    var quartile1 = chart.series[1].data;
    var median = chart.series[2].data;
    var quartile3 = chart.series[3].data;
    var max = chart.series[4].data;

    for(i=0; i<quartile1.length; i++)
    {      ...