How to change tool tip using High Charts

I have successfully created a chart using High Chart to compare the expected time & arrival time of a patient.

However, I am now having an issue with the label of the columns; which is displaying time in milliseconds.

The screen shot below shows the issue:

enter image description here

How do I change the label to display time in format (H:M:S)

CODE:

<script type="text/javascript">
        function drawChart(){
            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'divforchart',
                    type:'column',
                },
                xAxis: {
                    name:'patients',
                    categories: [<?php
                    echo "'".$names[0]."'";
                    for($i = 1; $i < sizeof($names); $i++){
                        echo ",'".$names[$i]."'";
                    }
                    ?>]
                },
                yAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats: { 
                        //force all formats to be hour:minute:second
                        second: '%H:%M:%S',
                        minute: '%H:%M:%S',
                        hour: '%H:%M:%S',
                        day: '%H:%M:%S',
                        week: '%H:%M:%S',
                        month: '%H:%M:%S',
                        year: '%H:%M:%S'
                    },
                    min: <?php echo "Date.UTC(".gmdate("Y,m,d,H",strtotime($minDate)).")";?>
                },

                series: [
                    {
                        name: 'Arrival time',
                        data: [<?php
                            echo "['".$names[0]."',Date.UTC(".gmdate("Y,m,d,H,i,s",strtotime($Arrival_time[0])).")]";
                            for($i = 1; $i < sizeof($names); $i++){
                                echo "
                                ,['".$names[$i]."',Date.UTC(".gmdate("Y,m,d,H,i,s",strtotime($Arrival_time[$i])).")]";
                            }
                        ?>]
                    },
                    {
                        name: 'Expected time',
                        data: [<?php
                            echo "['".$names[0]."',Date.UTC(".gmdate("Y,m,d,H,i,s",strtotime($Expected_time[0])).")]";
                            for($i = 1; $i < sizeof($names); $i++){
                                echo "
                                ,['".$names[$i]."',Date.UTC(".gmdate("Y,m,d,H,i,s",strtotime($Expected_time[$i])).")]";
                            }
                        ?>]
                    }
                ]
            });
        }
    </script>
    </head>
    <body onLoad="drawChart()">
     <div id="divforchart" style="height: 400px"></div>
    </body>

Solution

By the look of it, you are referring to the tooltip, not the dataLabel. You can use the formatter function to format the date properly:

http://api.highcharts.com/highcharts#tooltip.formatter

(if you are in fact talking about the dataLabel, you can do the same thing still: http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter )

I think the default is to numberFormat the y axis value, but you will want to instead use the dateFormat function in your formatter:

http://api.highcharts.com/highcharts#Highcharts.dateFormat%28%29

If you need help implementing, create a jsfiddle ( http://jsfiddle.net/ ) and post back