JSFiddle - React, Tailwind, and code Playground

by amcharts

HTML

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/flick/jquery-ui.css">
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/amstock.js"></script>
  <div id="tabs">
    <ul>
      <li><a href="#tab1">Stock1</a></li>
      <li><a href="#tab2">Serial</a></li>
      <li><a href="#tab3">Stock2</a></li>
    </ul>
    
      <div id="tab1" class="tab"><div id="chart1" style="width: 100%; height: 350px;"></div></div>
    <div id="tab2" class="tab"><div id="chart2" style="width: 100%; height: 350px;"></div></div>
    <div id="tab3" class="tab"><div id="chart3" style="width: 500px; height: 350px;"></div></div>
  </div>

CSS

#tabs { width: 100%: }
#tabs .tab { height: 300px; }
p { margin: 10px 0; }

JavaScript

var stockChart1;
var serialChart;
var stockChart3;
    
AmCharts.ready(function () {
    stockChart1 = createStockChart("chart1");
    serialChart = createSerialChart("chart2");
    stockChart3 = createStockChart("chart3");
});

function createStockChart(chartDiv) {    
    var chartData = generateStockChartData();
    var chart = new AmCharts.AmStockChart();
    chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
    
    // DATASET //////////////////////////////////////////
    var dataSet = new AmCharts.DataSet();
    dataSet.fieldMappings = [{fromField: "open", toField: "open"},
                             {fromField: "close", toField: "close"},
                             {fromField: "high", toField: "high"},
                             {fromField: "low", toField: "low"},
                             {fromField: "volume", toField: "volume"},
                             {fromField: "value", toField: "value"}];
    dataSet.color = "#7f8da9";
    dataSet.dataProvider = chartData;
    dataSet.title = "West Stock";
    dataSet.categoryField = "date";
    
    var dataSet2 = new AmCharts.DataSet();
    dataSet2.fieldMappings = [{
        fromField: "value",
        toField: "value"
    }];
    dataSet2.color = "#fac314";
    dataSet2.dataProvider = chartData;
    dataSet2.compared = true;
    dataSet2.title = "East Stock";
    dataSet2.categoryField = "date";
    
    chart.dataSets = [dataSet, dataSet2];
    
    // PANELS ///////////////////////////////////////////                                                  
    var stockPanel = new AmCharts.StockPanel();
    stockPanel.title = "Value";
    stockPanel.showCategoryAxis = false;
    stockPanel.percentHeight = 60;
    
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.dashLength = 5;
    stockPanel.addValueAxis(valueAxis);
    
    stockPanel.categoryAxis.dashLength = 5;
    
    // graph of first stock panel
    var graph = new AmCharts.StockGraph();
    graph.type = "candlestick";
  ...