JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

JavaScript

Highcharts.stockChart('container', {
  rangeSelector: {
    buttons: [{
      text: '1m',
      title: '1 Minute',
      type: 'hour',
      count: 1,
      dataGrouping: {
        units: [
          ['minute', [1]]
        ]
      }
    }, {
      text: '5m',
      title: '5 Minutes',
      type: 'hour',
      count: 6,
      dataGrouping: {
        units: [
          ['minute', [5]]
        ]
      }
    }, {
      text: '15m',
      title: '15 Minutes',
      type: 'day',
      count: 1,
      dataGrouping: {
        units: [
          ['minute', [15]]
        ]
      }
    }, {
      text: '30m',
      title: '30 Minutes',
      type: 'day',
      count: 3,
      dataGrouping: {
        units: [
          ['minute', [30]]
        ]
      }
    }, {
      text: '1h',
      title: '1 Hour',
      dataGrouping: {
        units: [
          ['hour', [1]]
        ]
      }
    }, {
      text: '4h',
      title: '4 Hours',
      dataGrouping: {
        units: [
          ['hour', [4]]
        ]
      }
    }, {
      text: 'D',
      title: '1 Day',
      dataGrouping: {
        units: [
          ['day', [1]]
        ]
      }
    }],
    selected: 4
  }
});