mystuff

stacked bar

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: 220px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
 chart: {
        type: 'bar',
		backgroundColor:'transparent'
    },
    title: {
     text: undefined
    },

   
   xAxis: {    
  	 title: {
            
            text : undefined
           },
            
        categories: ['hier','auj.'],
		labels: {
            style: {
                color: 'red'
            }
        }
   },
   
	 yAxis: {    
	 max: 1400,
             tickInterval: 120,
			  gridLineWidth: 0,
     title: {
            enabled: false},
    labels: {
            formatter: function () {
                return Math.trunc((this.value / 60))+':'+Math.trunc((((this.value / 60) - Math.trunc((this.value / 60))) * 60))+'0';

            } ,           style: {
                color: 'red'
            }
        }
		},
    plotOptions: {
        series: {
            stacking: 'normal',
            
         
	    
	            pointWidth: 22//width of the column bars irrespective of the chart size
	      
            
        }
    },
    series: [

	  {
        keys: ['y','x', 'id'],color: '#4274f4',
        data: [[90,0, '0']]
    },
    	{
        keys: ['y', 'id'],color: '#f4b042',shadow: { color: 'red',   offsetX: -1, opacity: 0.8 },
        data: [[190, '1']]
    },{
        keys: ['y', 'id'],color: '#4274f4',
        data: [[647, '2']]
    },{
        keys: ['y', 'id'],color: '#f4b042',shadow: { color: 'red',   offsetX: -1, opacity: 0.8 },
        data: [[107, '3']]
    },{
        keys: ['y', 'id'],color: '#4274f4',
        data: [[377, '4']]
    },{
        keys: ['y', 'id'],color: '#f4b042',shadow: { color: 'red',   offsetX: -1, opacity: 0.8 },
        data: [[26, '5']]
    },{
        keys: ['y', 'id'],color: '#4274f4',opacity: 0.3,
        data: [[7,  '6']]
    } ,{
        keys: ['y','x', 'id'],color: '#f4b042',shadow: { color: 'green',   offsetX: -1, opacity: 0.8 },
        data: [[80,1, '7']]
    },{
        keys: ['y','x', 'id'],color: '#4274f4',
        data: [[150,1, '8']]
    },{
       ...