Highcharts with Hours is possible?

Question

I already searched the Highcharts page and I could not find a chart that is of hours, all whole numbers, with comma etc, but I can not find any chart that you have with hours. Someone has some clue about this, the only one I thought involves Time is this

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/parallel-coordinates/

But this far from what I want, I wanted something more or less like this,

Answer 1

I found the answer to the problem, I hope I can help someone

var data = [
  [1496872800000, '17.24', '01.07'],
  [1496959200000, '17.25', '01.28'],
  [1497045600000, '17.27', '05.46'],
  [1497132000000, '1.40', '1.00']
];


function toTimestamp(timeUnformatted) {
  debugger;
  timeUnformatted = timeUnformatted < 10 ? ("0" + timeUnformatted) : timeUnformatted.toString();
  var timeFormatted = Date.parse("1-1-1 " + timeUnformatted.replace(".", ":") + ":00") - Date.parse("1-1-1 00:00:00");
  return timeFormatted;
}

// number with two decimal places
function toMs(num) {
  return 3600 * Math.floor(num) * (num % 1) * 60 * 1000;
}

var total = [],
  outOfTotal = [];

data.forEach(function(item) {
  total.push({
    x: item[0],
    y: toTimestamp(item[1]),
    label: item[1].toString().replace('.', ':')});
  outOfTotal.push({
    x: item[0],
    y: toTimestamp(item[2]),
    label: item[2].toString().replace('.', ':')});
});



Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'Column chart with negative values'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { //force all formats to be hour:minute:second
      second: '%H:%M',
      minute: '%H:%M',
      hour: '%H:%M',
      day: '%H:%M',
      week: '%H:%M',
      month: '%H:%M',
      year: '%H:%M'
    }
  },
  tooltip: {
    pointFormat: "<span style='color:{point.color}'>\u25CF</span> {series.name}: <b>{point.label}</b><br/>"
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Total',
    data: total
  }, {
    name: 'Out of total',
    data: outOfTotal
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>