JSFiddle - React, Tailwind, and code Playground

by ZottoSL

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 s + Highcharts.numberFormat((this.y / 1000), 2, '.') + ' kV</b><br/>';
                }
            },

            legend: {
                enabled: true
            },

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

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