JSFiddle - React, Tailwind, and code Playground

by Black Label

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

var data = [{
    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]
    ]
  }],
  finalData = [],
  i,
  j,
  series,
  point;

for (i = 0; i < data.length; i++) {
  series = data[i];
  finalData[i] = {
    name: series.name,
    pointInterval: series.pointInterval,
    data: []
  };

  for (j = 0; j < series.data.length; j++) {
    point = series.data[j];

    finalData[i].data.push({
      x: data[0].data[j][0],
      y: point[1],
      realX: point[0]
    });
  }
}

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,
        s = '<span style="color:' + this.series.color + '">' + n + '</span>: <b>',
        date = 'Date: ' + Highcharts.dateFormat('%e. %b %H:%M', this.realX),
        number = Highcharts.numberFormat((this.y / 1000), 2, '.') + ' kV</b><br/>';
      return s + number + date;
    }
  },

  legend: {
    enabled: true
  },

  navigation: {
    buttonOptions: {
      enabled: true
    }
  },

  series: finalData
});