JSFiddle - React, Tailwind, and code Playground

by JoeKuan

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
	<body>
  <div style="border: 2px solid #a1a1a1; width:350; height: 150; border-radius: 3px; " >
     <div id="container" ></div>
  </div>
	</body>

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
        document.title = "Highcharts " + Highcharts.version;

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                height: 250,
                spacingRight: 20 
            },
            title: {
                text: 'Market Data: Nasdaq 100'
            },
            subtitle: {
                text: 'May 11, 2012'
            },
            xAxis: {
                categories: [ '9:30 am', '10:00 am', '10:30 am', '11:00 am', '11:30 am', '12:00 pm',
                              '12:30 pm', '1:00 pm', '1:30 pm', '2:00 pm', '2:30 pm',
                              '3:00 pm', '3:30 pm', '4:00 pm' ],
                labels: {
                    step: 3
                }
            },
            yAxis: {
                title: {
                    text: null
                }
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            series: [{
              name: 'Nasdaq',
              color: '#4572A7',
              data: [ 2606.01, 2622.08, 2636.03, 2637.78, 2639.15, 2637.09, 
                      2633.38, 2632.23, 2632.33, 2632.59, 2630.34, 2626.89, 2624.59, 2615.98 ]
            }]
        });
    });
    
});