JSFiddle - React, Tailwind, and code Playground

by H17737

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 500px; min-width: 500px"></div>

JavaScript

$(function() {
		
		// Create the chart
		$('#container').highcharts('StockChart', {
		    chart: {
		    },

		    rangeSelector: {
		        selected: 1
		    },

		    title: {
		        text: 'USD to EUR exchange rate'
		    },

		    yAxis: {
		        title: {
		            text: 'Exchange rate'
		        }
		    },

			series: [{
                data:[null,null,null,null,null,null,null,null,null,
{Date.UTC(2003,9,7),0.8489},
{Date.UTC(2003,9,8),0.8459},
{Date.UTC(2003,9,9),0.8521}]
        },
        {
            data: [{Date.UTC(2003,8,24),0.8709},
                    {Date.UTC(2003,8,25),0.872},
{Date.UTC(2003,8,26),0.8714},
{Date.UTC(2003,8,29),0.8638},
{Date.UTC(2003,8,30),0.8567},
{Date.UTC(2003,9,1),0.8536},
{Date.UTC(2003,9,2),0.8564},
{Date.UTC(2003,9,3),0.8639},
{Date.UTC(2003,9,6),0.8538},
null,null,null}],
            color:'red',
            width:3
        }, {
		        type: 'flags',
		        name: 'Flags on series',
		        data: [{
					x: Date.UTC(2011, 1, 14),
					title: 'On series'
				}, {
					x: Date.UTC(2011, 3, 28),
					title: 'On series'
				}],
		        onSeries: 'dataseries',
		        shape: 'squarepin'
		    }, {
		        type: 'flags',
		        name: 'Flags on axis',
		        data: [{
					x: Date.UTC(2011, 2, 1),
					title: 'On axis'
				}, {
					x: Date.UTC(2011, 3, 1),
					title: 'On axis'
				}],
		        shape: 'squarepin'
		    }]
		});
	
});