JSFiddle - React, Tailwind, and code Playground

by Ivan Ferrer

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container">

</div>

CSS

.tooltip-block {
  background: #fff;
  padding: 6px;
  border: 1px solid #000;
}

JavaScript

//aqui seria seus dados que vem da requisição...
  var graph_data =  [
  {date:'10-08-2019', valor: 12.00, turno: 'T'},
  {date:'10-09-2019', valor: 10.30, turno: 'T'},
  {date:'10-10-2019', valor: 9.30, turno: 'T'}
  ];
  var graph_keys = [], graph_values = [];
  for (var i in graph_data) {
  var date = new Date(graph_data[i].date + " 23:59:59");
  var day = date.getDate();
  var monthIndex = date.getMonth();
  var year = date.getFullYear();
   graph_keys.push(day + "/" + monthIndex + "/" + year);
  graph_values.push(graph_data[i].valor);

}
  
 
$(function () {
    $('#container').highcharts({
        chart: {
        renderTo: 'container',
        type: 'column'
        },
        title: {
            text: 'Mês atual',
            x: -20 //center
        },
        subtitle: {
            text: 'Subtítulo',
            x: -20
        },
        xAxis: {
            categories: graph_keys,
        },
        yAxis: {
            title: {
                text: 'Percentagem'
            },
            plotLines: [{
                value: 1,
                width: 0,
                color: '#808080'
            }]
        },
       tooltip: {
                borderWidth: 0,
                backgroundColor: "rgba(255,255,255,0)",
                borderRadius: 0,
                shadow: false,
                useHTML: true,
                percentageDecimals: 0,
                formatter: function () {
                    // var point = filterLegend(this.point.name);
                    console.log(this);
                    
                    var obj = graph_data[this.series.data.indexOf( this.point )]
                 return '<div class="tooltip-block">' + this.key + '' + this.x + ':<br> ' + this.y + ' ' + JSON.stringify(graph_data[this.series.data.indexOf( this.point )]) +' (' + Math.round(Highcharts.numberFormat(this.percentage, 2)) + '%)</b>'+
                 '<br>Turno: ' + obj.turno +'<br>Valor: ' + obj.valor
                 +'</div>';
                  ...