JSFiddle - React, Tailwind, and code Playground

by tiagocarvalho

HTML

<script src="http://www.amcharts.com/lib/amstock.js"></script>
<link rel="stylesheet" href="http://www.amcharts.com/lib/style.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dark-hive/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery-ui-i18n.min.js"></script>
<div id="chartdiv" style="width:95%; height:400px;"></div>

CSS

body {
    background: gray;
}

#chartdiv input {
    -webkit-border-radius: 10px;
}

#chartdiv {
    margin:10px auto 80px;
   
}

.amChartsButtonSelected {
    background: blue; 
    border: blue;
}

JavaScript

AmCharts.ready(function () {
                generateChartData();
                createStockChart();
            });



            var chartData = [];

            function generateChartData() {
                var firstDate = new Date(2012, 0, 1);
                firstDate.setDate(firstDate.getDate() - 500)
                firstDate.setHours(0, 0, 0, 0);

                for (var i = 0; i < 500; i++) {
                    var newDate = new Date(firstDate);
                    newDate.setDate(newDate.getDate() + i);

                    var a = Math.round(Math.random() * (40 + i)) + 100 + i;
                    var b = Math.round(Math.random() * 100000000);

                    chartData.push({
                        date: newDate,
                        value: a,
                        volume: b
                    });
                }
            }

            var chart;

            function createStockChart() {
                chart = new AmCharts.AmStockChart();
                chart.pathToImages = "http://www.amcharts.com/lib/samples/stock/images/";

                chart.panEventsEnabled = true;
                // DATASETS //////////////////////////////////////////
                var dataSet = new AmCharts.DataSet();
                dataSet.color = "#b0de09";
                dataSet.fieldMappings = [{
                    fromField: "value",
                    toField: "value"
                }, {
                    fromField: "volume",
                    toField: "volume"
                }];
                dataSet.dataProvider = chartData;
                dataSet.categoryField = "date";

                // set data sets to the chart
                chart.dataSets = [dataSet];

                // PANELS ///////////////////////////////////////////                                                  
                // first stock panel
                var stockPanel1 = new AmCharts.StockPanel();
                stockPanel1.showCategoryAxis = false;
...