JSFiddle - React, Tailwind, and code Playground

by Pankaj

HTML

<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 400px;width:800px;"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line',
			/*renderTo: 'container',
			height:'600'*/			
    
            
        },
       
        yAxis: {
            min: 0,
            max: 50,
			tickInterval: 5,
			 title: {
                text: 'Time (in minutes)',
				/*align: 'high',
                offset: 0,
                margin: 60
                rotation: 0,
                y: -10*/
				style: {
                    //color: 'Black',
					fontWeight:'bold',
					fontSize:14
                }
                
            }
        },
 
        xAxis: {
           /*  categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]
           , */
			min:24.5,	
			tickInterval: 1,
						
		    title: {
                text: 'Questions',
				style: {
                    //color: 'Black',
					fontWeight:'bold',
					fontSize:14
                }
                
            },
			minorTickLength: 0,
			tickLength: 25
        },
	tooltip: {
            crosshairs: true,
            shared: true,
			backgroundColor: '#ffffff',
            borderColor: 'gray',
            borderWidth: 1,
			formatter: function () {
                var s = '<b>Question ' + this.x + '</b>';

                $.each(this.points, function () {
				totalSeconds =Math.floor(this.y*60) ;
				hours = Math.floor(totalSeconds / 3600);
				totalSeconds %= 3600;
				minutes = Math.floor(totalSeconds / 60);
				seconds = totalSeconds % 60;
				if(seconds<10){seconds ='0'+seconds;}
				if(minutes<10){minutes ='0'+minutes;}
				if(hours<10){hours ='0'+hours;}
                    s += '<br/>Taken '+ hours+':'+ minutes + ':'+seconds + ' minutes <br/>('+ (this.y )+' X 60 seconds)';
                });

                return s;
            }
        },		
	title: {
            /*floating: true,
            align: 'left',
            x: 100,
            y:...