JSFiddle - React, Tailwind, and code Playground

by dedelajoie

HTML

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

<script src="https://code.highcharts.com/modules/annotations.js"></script>

<div id="container" style="width: 600px; height: 120px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
 chart: {
        type: 'bar'
    },
    title: {
     text: undefined
    },
	  xAxis: {    
	 max: 0
   },
   
   xAxis: {    
  	 title: {
            
            text : 'hier'
           },
            
        categories: ['']
   },
   
	 yAxis: {    
	 max: 1400,
             tickInterval: 120,
     title: {
            enabled: false},
    labels: {
            formatter: function () {
                return Math.trunc((this.value / 60))+':'+Math.trunc((((this.value / 60) - Math.trunc((this.value / 60))) * 60))+'0';
            }
        }
		},
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [
	  {
        keys: ['y', 'id'],color: 'blue',
        data: [[90, '0']]
    },{
        keys: ['y', 'id'],color: 'red',
        data: [[190, '1']]
    },{
        keys: ['y', 'id'],color: 'blue',
        data: [[647, '2']]
    },{
        keys: ['y', 'id'],color: 'red',
        data: [[107, '3']]
    },{
        keys: ['y', 'id'],color: 'blue',
        data: [[377, '4']]
    },{
        keys: ['y', 'id'],color: 'red',
        data: [[26, '5']]
    },{
        keys: ['y', 'id'],color: 'blue',
        data: [[7,  '6']]
    }
    
    ],
    legend: {
        enabled: false
    },
    annotations: [{
        labels: [{
            point: '0',
            x: 2, y: -30,
            shadow: false
        }, {
            point: '1',
            	x: 2, y: -40,
            shadow: { color: 'red',   offsetX: -1, opacity: 0.3 }
        }, {
            point: '2',
            x: 2, y: -40,
            shadow: { color: 'red',   offsetX: -1, opacity: 0.3 }
			  }, {
            point: '3',
			 			x: 2, y: -40,
            shadow: { color: 'red',   offsetX: -1, opacity: 0.3 }
        }, {
            point: '4',
            	x: 2, y: -40,
              shadow: { color: 'blue',   offsetX: -1, opacity: 0.3 }
        }, {
            point: '5',
            	x: 2, y: -40,
              shadow: { color:...