JSFiddle - React, Tailwind, and code Playground

by Vignesh Gopalakrishnan

HTML

<script src="cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/vigneshncc/angular-bootstrap-colorpicker/master/js/bootstrap-colorpicker-module.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/vigneshncc/angular-bootstrap-colorpicker/master/css/colorpicker.css">
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
	<div ng-controller="ColorCtrl" ng-app="themeApp">
		<ul>
			<li ng-repeat="color in colors" style="background-color:{{color}}; width:50px;"> <span style="cursor:pointer;margin-left: 40px;" ng-click="removeColor($index)"><img src="https://cdn1.iconfinder.com/data/icons/diagona/icon/10/101.png" /></span></li>
		</ul>

		<form ng-submit="addColor()">
			<input colorPicker colorpicker-position="top" id="color" type="text" ng-model="enteredColor" >
			<input type="submit" value="add">
		</form>
	</div>

JavaScript

/**
 * Dark theme for Highcharts JS
 * @author Torstein Honsi
 */

// Load the fonts
Highcharts.createElement('link', {
   href: 'http://fonts.googleapis.com/css?family=Unica+One',
   rel: 'stylesheet',
   type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);

Highcharts.theme = {
   colors: ["#99b433", "#00a300", "#1e7145", "#ff0097", "#9f00a7", "#7e3878", "#603cba",
      "#1d1d1d", "#00aba9", "#2d89ef", "#2b5797"],
   chart: {
      backgroundColor: {
         linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
         stops: [
            [0, '#2a2a2b'],
            [1, '#3e3e40']
         ]
      },
      style: {
         fontFamily: "'Unica One', sans-serif"
      },
      plotBorderColor: '#606063'
   },
   title: {
      style: {
         color: '#E0E0E3',
         textTransform: 'uppercase',
         fontSize: '20px'
      }
   },
   subtitle: {
      style: {
         color: '#E0E0E3',
         textTransform: 'uppercase'
      }
   },
   xAxis: {
      gridLineColor: '#707073',
      labels: {
         style: {
            color: '#E0E0E3'
         }
      },
      lineColor: '#707073',
      minorGridLineColor: '#505053',
      tickColor: '#707073',
      title: {
         style: {
            color: '#A0A0A3'

         }
      }
   },
   yAxis: {
      gridLineColor: '#707073',
      labels: {
         style: {
            color: '#E0E0E3'
         }
      },
      lineColor: '#707073',
      minorGridLineColor: '#505053',
      tickColor: '#707073',
      tickWidth: 1,
      title: {
         style: {
            color: '#A0A0A3'
         }
      }
   },
   tooltip: {
      backgroundColor: 'rgba(0, 0, 0, 0.85)',
      style: {
         color: '#F0F0F0'
      }
   },
   plotOptions: {
      series: {
         dataLabels: {
            color: '#B0B0B3'
         },
         marker: {
            lineColor: '#333'
         }
      },
      boxplot: {
         fillColor: '#505053'
      },
      candlestick: {
         lineColor: 'white'
   ...