JSFiddle - React, Tailwind, and code Playground

by Aakash Khapare M

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

nombre_sitio = "piezometros";
central = "Baitun";
no_registros = 1;
y1 = "e";




$(function () {

    diario = new Highcharts.Chart({
        chart: {
            defaultSeriesType: 'line',
            renderTo: 'container',
            zoomType: 'xy',
            marginRight: 65
        },
        title: {
            text: ' C.H. ' + central + ' - Reporte de Monitoreo GeolĂłgico: ' + nombre_sitio,
            x: -20 //center
        },

        xAxis: {
            type: 'datetime',
            title: {
                text: null
            },

            labels: {
                enabled: true,
                //rotation: 45, 
                align: 'left',
                formatter: function () {
                    //return Highcharts.dateFormat('%H:%M %p<br>%m-%d %a', this.value);
                    return Highcharts.dateFormat('%H:%M<br>%b-%d-%y', this.value);
                }
            }
        },

        yAxis: [{
            title: {
                text: '"ELEVACION_PIEZOMETRO [msnm]"'
            }
        }, {
            title: {
                text: '',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            opposite: true
        }],

        tooltip: {
            shared: true,
            crosshairs: true //,
            //formatter: function () {
            //if (this.series.name == "Eventos") {
            //	 return 'Extra data: <b>'+ this.point.myData +'</b>';
            //} 
            //}
        },



        legend: {
            //layout: 'vertical',
            //align: 'right',
            verticalAlign: 'bottom',
            //floating: true,
            borderWidth: 0
        },


        series: [{
            type: "spline",
            name: "E. Piezometrica-A1",
            marker: {
                enabled: true
            },
            data: [
                [1365350400000, 372.76],
                [1370532600000, 372.76],
               ...