HighChart timestamp highlight the time now

Question

I use HighStock library to show an availability calendar with columnrange. Here is my code :

$(function () {
 $('#container').highcharts({

     chart: {
         type: 'columnrange',
         inverted: true
     },
     title: {
         text: 'Equipment Status'
     },
     scrollbar: {
         enabled: true
     },
     xAxis: {
         categories: ['Status']
     },
     yAxis: {
         type: 'datetime',
         title: {
             text: 'Timespan'
         }
     },
     plotOptions: {
         columnrange: {
             grouping: false
         }
     },
     legend: {
         enabled: true
     },
     tooltip: {
         formatter: function () {
             return '<b>' + this.x + ' - ' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %B %H:%M', this.point.low) +
                 ' - ' + Highcharts.dateFormat('%B %e %H:%M', this.point.high) + '<br/>';
         }
     },

     series: [{
         name: 'Producing',
         data: [{
             x: 0,
             low: Date.UTC(2013, 07, 03, 0, 0, 0),
             high: Date.UTC(2013, 07, 03, 4, 0, 0)
         }, {
             x: 0,
             low: Date.UTC(2013, 07, 03, 10, 0, 0),
             high: Date.UTC(2013, 07, 03, 12, 0, 0)
         }, {
             x: 0,
             low: Date.UTC(2013, 07, 03, 14, 0, 0),
             high: Date.UTC(2013, 07, 03, 15, 0, 0)
         }

         ]
     }, {
         name: 'Breakdown',
         data: [{
             x: 0,
             low: Date.UTC(2013, 07, 03, 4, 0, 0),
             high: Date.UTC(2013, 07, 03, 10, 0, 0)
         }, {
             x: 0,
             low: Date.UTC(2013, 07, 03, 18, 0, 0),
             high: Date.UTC(2013, 07, 03, 24, 0, 0)
         }]
     }, {
         name: "Changeover",
         data: [{
             x: 0,
             low: Date.UTC(2013, 07, 04, 1, 0, 0),
             high: Date.UTC(2013, 07, 04, 5, 0, 0)
         }, {
             x: 0,
             low: Date.UTC(2013, 07, 02, 10, 0, 0),
             high: Date.UTC(2013, 07, 02, 23, 0, 0)
         }, ]
     }, {
         name: "TrialRun",
         data: [{
             x: 0,
             low: Date.UTC(2013, 07, 04, 5, 0, 0),
             high: Date.UTC(2013, 07, 04, 13, 0, 0)
         }, {
             x: 0,
             low: Date.UTC(2013, 07, 02, 2, 0, 0),
             high: Date.UTC(2013, 07, 02, 10, 0, 0)
         }]
     }]
  });
});

JSFiddle Link

I would like to highlight the tick's current timestamp (hour/minutes) by, for example, a single vertical line in red at the current time.

Is it possible?

Thank you !

Answer 1

Hello there Peter Krzywokulski,

By creating a new variable for the today's time:

var today = new Date();

And as the guys mentioned here, creating a plotline:

 plotLines: [{

                 value: today,
                 color: 'red',
                 width: 2
             }]

You can check it out here: JSFfiddle

Good luck!

Answer 2

As Pawel Fus said, I just need to use plotLines options.

yAxis: {
         type: 'datetime',
         title: {
             text: 'Timespan'
         },
         plotLines: [{
             value: Date.UTC(2013, 07, 02, 23, 30, 0),
             color: 'red',
             width: 2
         }]
     }

JSFiddle