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'
  },

  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]]
        ]
      }
    }
  },

  series: [{
    "name": "Minima",
    "pointInterval": 86400000,
    "data": [
      [1538467200000, 215.9],
      [1538581500000, 217.6],
      [1538651700000, 218],
      [1538728200000, 218.5]
    ]
  }, {
    "name": "Maxima",
    "pointInterval": 86400000,
    "data": [
      [1538506800000, 228.8],
      [1538530200000, 228.4],
      [1538676000000, 229.3],
      [1538779500000, 228.8]
    ]
  }, {
    "name": "Promedio",
    "pointInterval": 86400000,
    "data": [
      [1538438400000, 223.9365],
      [1538524800000, 224.0667],
      [1538611200000, 224.4135],
      [1538697600000, 224.45]
    ]
  }]
});