JSFiddle - React, Tailwind, and code Playground

HTML

<title>Multiple Currencies</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

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

<div id="loading" sytle="font-weight:bold;"></div>
<div id="container" style="height: 500px; min-width: 500px">

JavaScript

$(function() {
	console.log('in annynymous()');
//	var names = ['GBP_USD'], // Any One Currency, works [serise is as it should be]
   var names = ['GBP_USD', 'EUR_USD', 'USD_CHF'], // Three currencies [series are flat]
		seriesCounter = 0,
		seriesOptions = [],
        axisOptions = [],
		colors = Highcharts.getOptions().colors;

	console.log('starting to retrive data');

  $.each(names, function(i, name) {
	document.getElementById("loading").innerHTML = '<B>Loading please wait.. retrieving data</B>';

    
    var url = "http://134.213.48.26:8080/apitest/api/v1/ext/jsfiddle/data?callback=?&id="+ name; 
		$.getJSON(url, function(data) {
			console.log( "success with grabing json data for " + name);

			seriesOptions[i] = {
					name: name + ' Temperature',
					data: data,
					color: colors[i],
					type: 'line',
                	yAxis: i
				};
            
            axisOptions.push({
                title: {
                    text: name + 'Prices'
                },
            });

			// As we're loading the data asynchronously, we don't know what order it will arrive. So
			// we keep a counter and create the chart when all the data is loaded.
			seriesCounter++;

			if (seriesCounter == names.length) {
				createChart();
			}
		});
	});

	// create the chart when all data is loaded
	function createChart() {

		console.log('in createChart()');
		Highcharts.setOptions({
					global: {
						useUTC: false
					}
			});	
		
		// Create a timer, to test how long this takes to load
		var start = + new Date();

		// Create the chart
		$('#container').highcharts('StockChart', {
			
		    chart: {
				events: {
					load: function(chart) {
						this.setTitle(null, {
							text: 'This chart was built on '+ new Date() + ' in ' + (new Date() - start) +'ms' 
						});
						

					}
				}
		    },
  			rangeSelector: {
		        buttons: [{
		            type: 'hour',
		            count: 1,
		            text: '1hr'
		        }, {
		            type: 'hour',
		 ...