JSFiddle - React, Tailwind, and code Playground

by ewolden

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

chart = new Highcharts.StockChart({

    chart: {
      renderTo: "container",
      type: 'spline',
      events: {
        load: function() {
          let extremes = this.xAxis[0].getExtremes()
          let min = extremes.dataMin - extremes.dataMin % (1000 * 60 * 60 * 24),
            max = extremes.dataMax - extremes.dataMax % (1000 * 60 * 60 * 24);
          this.update({
            xAxis: {
              min: min,
              max: max
            },
            navigator: {
              xAxis: {
                min: min,
                max: max
              }
            }
          }, true, false, false)
        }
      }
    },

  colors: ['#3131F8', '#FB1C1C', '#008000', '#f7a35c', '#8085e9',
    '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'
  ],

  yAxis: {
    opposite: false,
    showLastLabel: true,
    labels: {
      enabled: true,
      align: "right"
    },

    title: {
      text: 'Tensión'
    }
  },

  rangeSelector: {
    enabled: true
  },

  tooltip: {
    pointFormatter: function() {
      var n = this.series.name;
      var s = '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>';
      return Highcharts.dateFormat('%m/%d - %H:%M', this.series.xData[this.index]) + s + Highcharts.numberFormat((this.y / 1000), 2, '.') + ' kV</b><br/>';
    }
  },

  legend: {
    enabled: true
  },

  navigation: {
    buttonOptions: {
      enabled: true
    }
  },
  plotOptions: {
    series: {
      dataGrouping: {
        forced: true,
        units: [
          ['day', [1]]
        ]
      }
    }
  },

  navigator: {
    series: {
      dataGrouping: {
        smoothed: false,
        forced: true,
        units: [
          ['day', [1]]
        ]
      }
    }
  },


  series: [{
    "name": "Minima",
    "pointInterval": 86400000,
    "data": [
      [1538467200000, 215.9],
      [1538581500000, 217.6],
      [1538651700000, 218],
      [1538728200000, 218.5]
    ]
  }, {
    "name": "Maxima",
   ...