JSFiddle - React, Tailwind, and code Playground

by Jeferson Almeida

HTML

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

JavaScript

$(function () {

var categorias = ["Pos 01", "Pos 02", "Pos 03", "Pos 04", "Pos 05", "Pos 06", "Pos 07", "Pos 08", "Pos 09", "Pos 10", "Pos 11", "Pos 12", "Pos 13", "Pos 14", "Pos 15", "Pos 16", "Pos 17"];

var planejado = [{x: 1534095420000, y:15},{x:1534097580000, y:14},{x:1534099020000,y:13},{x:1534119900000,y:12},{x:1534149780000,y:11},{x:1534174620000,y:10},{x:1534176420000,y:9},{x:1534189020000,y:8},{x:1534313940000,y:7},{x:1534317900000,y:6},{x:1534337700000,y:5},{x:1534373880000,y:4},{x:1534374120000,y:3},{x:1534375560000,y:2},
{x:1534377720000,y:1},{x:1534378200000,y:0},{x:1534378200000,y:0},{x:1534414200000,y:0},{x:1534414620000,y:1}];

var series =[{
                name: "Planejado",
                id: "planejado",
                data: planejado
            }];
            
          
  // Create the chart
  window.chart = new Highcharts.Chart('container',{
                colors: ["#7cb5ec"],
                chart: {
                    type: "spline",
                },
                exporting: {
                    enabled: false
                },
                title: {
                    text: 'Gráfico'
                },
                yAxis: {
                    categories: categorias,
                    title: {
                        text: 'Posição'
                    },
                    labels: {
                        format: '{value}'
                    },
                },
                xAxis: {
                    title: {
                        text: 'Tempo'
                    },
                    type: 'datetime',
                    tickInterval: 3600000,
                },
                plotOptions: {
                    spline: {
                        findNearestPointBy: 'xy',
                        marker: {
                            enabled: true
                        }
                    }
                },
                tooltip: {
                    split: false,
                    useHTML:...