JSFiddle - React, Tailwind, and code Playground

by rarteaga

HTML

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

<div>
    <div id="container" style="height: 50px; margin: auto; min-width: 310px; max-width: 600px">
    </div>
    <span class="label-boxplot1" id="box-text-ini"></span>
    <span class="label-boxplot2" id="box-text-fin"></span>
</div>

<div>
    <div id="container-2" style="height: 50px; margin: auto; min-width: 310px; max-width: 600px"></div>
    <span class="label-boxplot1" id="box1-text-ini"></span>
    <span class="label-boxplot2" id="box1-text-fin"></span>
</div>

 <div>
    <div id="container-3" style="height: 50px; margin: auto; min-width: 310px; max-width: 600px"></div>
     <span class="label-boxplot1" id="box2-text-ini"></span>
     <span class="label-boxplot2" id="box2-text-fin"></span>
</div>

CSS

.label-boxplot1, .label-boxplot2 {
    font-size: 9px;
    position: relative;
}
.label-boxplot1 {    
    top: -20px;
    left: 50px;
}

.label-boxplot2 {
    top: -20px;
    left: 235px;
}

JavaScript

function dragBoxplot(container, linecolor, mediancolor, fillcolor, series) {
    $(container).highcharts({

	    chart: {
	        type: 'boxplot',
            inverted: true,
            width: 300,
            height: 52,
            backgroundColor: 'transparent'
	    },
	    
	    title: {
	        text: ''
	    },
        
        tooltip: {
            enabled: false
        },
	    
	    legend: {
	        enabled: false
	    },
	
	    xAxis: {
            lineWidth: 0,
            categories: ['1', '2', '3', '4', '5'],
            gridLineColor: 'transparent',
	        title: {
                enabled: false
	        },
            
            labels: {
                enabled: false
            },
	    },
	    
	    yAxis: {
            gridLineColor: 'transparent',
            lineWidth: 0,
	        title: {
                enabled: false
	        },
            
            labels: {
                enabled: false
            },
	    },
        
        legend: {
            enabled: false
        },
        
        credits: {
            enabled: false
        },
        
        plotOptions: {
            boxplot: {
                    color: linecolor,
                    medianWidth: 3,
                    medianColor: mediancolor,
                    fillColor: fillcolor,
           }
        },
	
	    series: [{
            data: [
                    [series[0], series[1], series[2], series[3], series[4]]
            ]
	    }]
	});
}

$(function () {
    var data = [25, 28, 30.50, 33, 38];
    var data1 = [1, 1, 2.00, 3, 6];
    var data2 = [9.99, 28.1, 56.78, 85.45, 192.18];
    $("#box-text-ini").text(data[0]);
    $("#box-text-fin").text(data[4]);
    $("#box1-text-ini").text(data1[0]);
    $("#box1-text-fin").text(data1[4]);
    $("#box2-text-ini").text(data2[0]);
    $("#box2-text-fin").text(data2[4]);
    dragBoxplot("#container", "#c4c4c4", "#663399", "#9A60C4", data);
    dragBoxplot("#container-2", "#c4c4c4", "#CE9235", "#FFB547",...