Formatting data points and Y-axis labels using HighCharts

Question

My data points consist of time spans expressed in seconds to two decimal places. However, for display purposes, I want these values to be formatted in minutes, seconds, and hundredths. For example, the value 125.78, should be displayed as 2:05.78 in the tooltip and the Y-axis labels should be formatted likewise.

$(function () {
    $('#container').highcharts({
        title: {
            text: '800 Meter times',
            x: -20 //center
        },
        xAxis: {
            categories: ['3/7', '3/14', '3/21', '3/28']
        },
        yAxis: {
            title: {
                text: 'Times'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Joe Blow',
            data: [125.78, 125.12, 123.88, 124.06]
        }]
    });
});

Here's the JSFiddle: http://jsfiddle.net/dhf9nod8/

Answer 1

You can use yAxis.labels.formatter to format the y-axis, and tooltip.formatter to format the tooltip. And plug in the following function to format the time:

var seconds2minutes = function (totalSeconds) {
    //convert to mins and secs
    var min = Math.floor(totalSeconds / 60);
    var remainingSeconds = totalSeconds - 60 * min;
    return min + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds.toFixed(2);
};

Then use it to format the y-axis

    yAxis: {
        //..your code, then
        labels: {
            formatter:function() {
                return seconds2minutes(this.value);
            }
        }
    },

http://api.highcharts.com/highcharts#yAxis.labels.formatter

Then use it again to format the tooltip. The bare requirement would be

    tooltip: {
        formatter:function () {
            return seconds2minutes(this.y);
    },

However, this will override all the pretty HTML you get by default, so to maintain that, here is the full solution:

tooltip: {
    formatter:function () {
        //make the x val "small"
        var retVal="<small>"+this.x+"</small><br />"; 
        //put 2nd line in a div to center vertically
        retVal+="<div style=height:14px;font-size:12px;line-height:14px;>";
        //make the point dot
        var dot="<div style='background-color:"+this.point.color+";height:6px;width:6px;display:inline-block;border-radius:50%;'> </div> ";
        //print the dot, series name, and time in bold
        retVal+=dot+this.series.name+": <strong>"+seconds2minutes(this.y)+"</strong>";
        return retVal;
    },
    useHTML:true //not all styles and tags are enabled by default
},

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

And a fiddle:

http://jsfiddle.net/dhf9nod8/2/