JSFiddle - React, Tailwind, and code Playground

by Gert Vaartjes

HTML

<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
    <link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css//annotations/popup.css">    
</head>
<body>
  <div class="header">
      <div class="row">
          <div id="highcharts-logo" class="cell">
              <a href="https://www.highcharts.com" title="Highcharts Home Page">
                  <img alt="Highcharts Home Page" src="/assets/images/highcharts.svg">
              </a>
          </div>
          <div id="page-title" class="cell">
              <h1>Highstock</h1>
          </div>
      </div>
  </div>
  <div class="content">
    <div class="tools-container">
      <div class="highcharts-series-type-candlestick highcharts-btn" title="Candlestick"></div>
      <div class="highcharts-series-type-ohlc highcharts-btn" title="OHLC"></div>
      <div class="highcharts-series-type-line highcharts-btn" title="Line"></div>
    </div>
    <div class="tools-container">
        <div class="highcharts-label-annotation highcharts-btn" title="Label"></div>
        <div class="highcharts-circle-annotation highcharts-btn" title="Circle"></div>        
    </div>
    <div class="tools-container">
      <div class="highcharts-fibonacci highcharts-btn"></div>
      <div class="highcharts-current-price-indicator highcharts-btn" title="Current price"></div>   
    </div>
    <div id="container" class="chart"></div>
  </div>

  <script src="https://code.highcharts.com/stock/highstock.js"></script>
  <script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>
  <script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
  <script src="https://code.highcharts.com/stock/modules/annotations-advanced.js"></script>
  <script src="https://code.highcharts.com/stock/modules/price-indicator.js"></script>
  <script src="https://code.highcharts.com/stock/modules/full-screen.js"></script>
 ...

CSS

#container {
	/*min-width: 320px;
	max-width: 600px;*/
	margin: 0 auto;
}

.chart {
  height: 75% !important
}

.buttonbar {
  min-width: 320px;
	max-width: 600px;
	margin: 10 auto;
}

.header {
  width: 100%;
  color: #eeeaea;
  font-size: 14px;
  background: #2a2a2b;
  height: 90px;
}

.header .cell {
  vertical-align: middle;
  display: inline-block;
  height: 50px;
  line-height: 100px;
}

#highcharts-logo {
  width: 25%;
}

#highcharts-logo img {
  height:200%
}

#page-title {
  width: 50%;
  text-align: center;
  float: none;
  padding: 0;
}

#page-title h1 {
  margin: 0;
  font-family: 'DIN Condensed';
  font-size: 5em;
  color: #34A5DA;
}

body {
  font-family: sans-serif;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}

.content {
  background-image: url('/assets/images/hc-bkg-downloads.svg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  padding: 25px;
}

/* STOCK TOOLS */
.tools-container div[class*="highcharts-"] {
  background-repeat: no-repeat;
  height: 40px;
  width: 40px;
  background-color: aliceblue;
  border: 1px grey solid
}

.tools-container .highcharts-active {
  background-color: #e6ebf5;
}

.tools-container {
  background-repeat: no-repeat;
  cursor: pointer;
  float: left;
  height: 40px;
  position: relative;
  width: auto;
  margin-bottom: 8px;
}

.highcharts-btn {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  display: inline-block;
  float: left;
  margin: 2px;
  height: 40px;
  width: 40px;
}

.tools-container .highcharts-series-type-candlestick {
  background-image: url('/https://code.highcharts.com/gfx/stock-icons/series-candlestick.svg');
}

.tools-container .highcharts-series-type-ohlc {
  background-image: url('https://code.highcharts.com/gfx/stock-icons/series-ohlc.svg');
}

.tools-container .highcharts-series-type-line {
  background-image: url('https://code.highcharts.com/gfx/stock-icons/series-line.svg');
}

.tools-container .highcharts-label-annotation {
 ...

JavaScript

"use strict";
/*global Highcharts,fetch*/

const create = (data) => {
  // create the chart
  Highcharts.stockChart('container', {
    rangeSelector: {
      selected: 1
    },
    title: {
      text: 'AAPL Stock Price'
    },
    stockTools: {
      gui: {
        enabled: false,
        _buttons: ['typeChange']
      }
    },
    navigation: {
      bindingsClassName: 'tools-container',
      navigation: {
        events: {
            selectButton: function (event) {
              console.log(event)
              event.button.classList.add('highcharts-active');
            },
            deselectButton: function (event) {
              event.button.classList.remove('highcharts-active');
            }
        }
      },
    },
    yAxis: [{
      height: '75%',
      resize: {
        enabled: true
      },
      title: {
        text: 'AAPL'
      }
    }, {
      top: '75%',
      height: '25%',
      title: {
        text: 'MACD'
      }
    }],
    series: [{
      id: 'aapl',
      type: 'candlestick',
      name: 'AAPL Stock Price',
      data: data,
      dataGrouping: {
        units: [
          [
            'week', // unit name
            [1] // allowed multiples
          ], [
            'month',
            [1, 2, 3, 4, 6]
          ]
        ]
      }
    }, {
      type: 'macd',
      yAxis: 1,
      linkedTo: 'aapl'
    }]
  });
}

fetch('https://www.highcharts.com/samples/data/aapl-ohlcv.json')
  .then((res) => {
    return res.json();
  })
  .then(json => create(json))
  .catch(error => console.error(error))