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 the same x Axis on the three graphics but exactly same min max.
<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]],
	    }]
	});
});

$(function () {
    
    $('#containerLine').highcharts({
        
	    chart: {
         renderTo: 'containerLine',
         backgroundColor:'rgba(255, 255, 255, 0.95)',
         spacingLeft : 0,
         marginLeft : 0,
         spacingRight : 0,
         marginRight : 0,
         events: {
     ...