JSFiddle - React, Tailwind, and code Playground

by Pierre LE ROUX

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
Not exactly same xAxis
<div id="container" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="containerLine" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="containerLineErrorBar" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    
    $('#container').highcharts({
        
	    chart: {
renderTo: 'container',
                            backgroundColor:'rgba(255, 255, 255, 0.95)',
                            spacingLeft : 0,
                            marginLeft : 0,
                            spacingRight : 0,
                            marginRight : 0,
                            events: {
                                load: function(event) { /* alert ('Chart loaded : ' + event); */}
                            }
	    },
	    
	    title: {
	        text: ''
	    },

	
	    xAxis: {
            type: 'datetime',
	        labels: {

	        	formatter: function () {
	        		return this.value;
	        	}
	        },
            labels: {
                                format: '{value: <b>%d/%m</b> %H:%M}',
                                staggerLines: 1
                            },
                            min: 139722435000,
                            max: 139818045000,
                            minPadding: 0,
                            maxPadding: 0,
                            startOnTick: false,           // allow to start not from tick
                            endOnTick: false
	    },
	        
	    yAxis: {
	        min: 5
	    },
	    
	    plotOptions: {
            series: {
                      pointPadding: 0,
                      groupPadding: 0, 
                      dataLabels: {
                         style: {font: 'bold 11px Arial'}
                      },
                      marker: {
                         lineColor: null,
                         radius: 6,
                         states: { hover: { radius: 10 } }
                      }
            }
	    },
	
	    series: [{
	        type: 'errorbar',
	        name: 'Column',
	        data: [[139728045000, 9, 11],[139738045000, 8, 11],[139753545000, 8, 11], [139769145000, 8, 11], [139799945000, 6, 11]],
	        pointPlacement: 'between'
	    }]
	});
});

$(function...