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: 900px; 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,
        containerHeight = $('#container').height(),
       
        numAxes = names.length,
        // percentage of height left out for spacing the 3 y-axes
        axisSpacingPercent = 5,
       // percentage of height occupied by each y-axis
        axisHeightPercent = (100 - (numAxes - 1) * axisSpacingPercent) / numAxes;

	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'
                },
                // settings for multiple panes in the chart
                height: '' + axisHeightPercent + '%',
                top: '' + (i * (axisHeightPercent + axisSpacingPercent)) + '%',
                offset: false,
                lineWidth: 1
            });

			// 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:...