JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>

<div class="panel">
  <div class="panel-heading">
    <h2 class="panel-title">Return vs. Benchmark</h2>
    <div class="panel-menu">
      <i class="fa fa-sliders" aria-hidden="true"></i>
    </div>
  </div>
  <div class="panel-body">
    <div id="idChart" class="content-chart" />
  </div>
</div>
<!-- 
https://money.rediff.com/money1/currentstatus.php?companycode=15510001
https://www.bloomberg.com/markets/watchlist/recent-tickers/data/TATA:IN
https://stackoverflow.com/questions/24079093/how-to-remove-double-quotes-while-reading-csv
https://stackoverflow.com/questions/19316394/removing-double-quotes-from-a-string-in-java/19316426

WATCH_LIST_SYMBOLS
SYMBOL
EXCHANGE
DATE
OPEN
HIGH
LOW
CLOSE
CHNG %
CHNG
52W LOW
52W HIGH


 -->

CSS

$spacing: 30px;

html,
body {
  background-color: #171819;
  color: #DDD;
  font-family: "Helvetica", sans-serif;
  padding: $spacing;
}

.panel {
  background-color: #1A2226;
}

.panel-heading,
.panel-body {
  padding: $spacing;
  position: relative;
}

.panel-menu {
  position: absolute;
  right: $spacing;
  top: $spacing;
}

.panel-title {
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.content-chart {
  height: 380px;
  min-width: 380px;
}

JavaScript

(function () {

// Basic theme
var uiColorDeepDark = '#171819';chart1
var uiColorDarkest = '#1A2226';
var uiColorDarker = '#313D4E';
var uiColorDark = '#3f4d61';
var uiColorLight = '#435063';
var uiColorLighter = '#808FA3';
var uiColorLightest = '#F0F0F0';
var uiColorHighlight = '#2c99f0';
var uiColorLowlight = '#295c87';
var uiColorHighlightAlt = '#76E7FF';
var uiColorHighlightAlt = '#0091EA';
var uiColorStockValue = '#FFC300';
var uiColorCashBalance = '#2CD5D4';
var uiFontFamily = "Roboto, Helvetica, Arial, sans-serif";
var uiStrokeWidth = 0.5;

var uiColorViolet = '#75C3B8';
var uiColorBlue = '#329FF2';
var uiColorSkin = '#EFB49B';
var uiColorYellow = '#FED230';
var uiColorNavy = '#3774B1';
var uiColorGreen = '#75C3B8';  

/* AAPL historical OHLC data from the Google Finance API */
var aaplData =...