Changing charts tooltip

Question

I'm wondering how to change the tooltip value from one value to another.

The following snippet of the main code shows my attempt, hopefully you can understand what I want from it:

chart.tooltip[0].setPointFormat({
                pointFormat: '{point.x} m, {point.y} m'

Any help would be hugely appreciated :) Here is the main code:

function toggleContent(){
    document.getElementById("text").value=="Base unit" ? (document.getElementById("text").value="Base unit x1000"
): (document.getElementById("text").value="Base unit");

if(document.getElementById("text").value=="Base unit"){
    func2();}
else{
    func1();}
}


var divide=1;
function func1 () {
    var chart = $('#container').highcharts();
    var data = chart.series[0].data;
    if (data.length) {
        for(var i=0;i<data.length;i++)
        {
            var point = data[i];
            point.update([point.x/=1000,point.y/=1000]);
        }
        divide*=1000;
        chart.yAxis[0].setTitle({
            text: 'Surplus of Electrical Cable (km)'
        });
        chart.xAxis[0].setTitle({
            text: 'Electrical Cables (km)'
        });
        chart.tooltip[0].setPointFormat({          //This is the snippet line
            pointFormat: '{point.x} m, {point.y} m' 
        });

    }

};

var divide=1;
function func2() {
    var chart = $('#container').highcharts();
    var data = chart.series[0].data;
    if (data.length) {
        for(var i=0;i<data.length;i++)
        {
            var point = data[i];
            point.update([point.x*=1000,point.y*=1000]);
        }
        divide/=1000;
        chart.yAxis[0].setTitle({
            text: 'Surplus of Electrical Cable (m)'
        });
        chart.xAxis[0].setTitle({
            text: 'Electric Cables (m)'
        });
    }
};


$(function () {


    $('#container').highcharts({
        chart: {
            type: 'scatter',
            zoomType: 'xy'
        },
        title: {
            text: 'Height Versus Weight of 507 Individuals by Gender'
        },
        subtitle: {
            text: 'MainKey Quantities'
        },
        xAxis: {
            title: {
                enabled: true,
                text: 'Electric Cables (km)'
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true
        },
        yAxis: {
            title: {
                enabled: true,
                text: 'Surplus of Electric Cable (km)'
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 100,
            y: 70,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
            borderWidth: 1
        },
        plotOptions: {
            scatter: {
                marker: {
                    radius: 5,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(100,100,100)'
                        }
                    }
                },
                states: {
                    hover: {
                        marker: {
                            enabled: false
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<b>{series.name}</b><br>',
                    pointFormat: '{point.x} km, {point.y} km'
                }
            }
        },
        series: [{
            name: 'Actual Values',
            color: 'rgba(223, 83, 83, .5)',
            data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
                [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
                [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
                [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
                [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
                [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
                [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
                [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
                [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3]]

        }]
    });
});

JSfiddle: http://jsfiddle.net/mPY8z/2/ P.s. essentially I want the value of the tooltip to be in meters (m) whereas currently it only shows as (km)

Answer 1

Setting the formatter function of the tooltip achieves this.

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

Demo:http://jsfiddle.net/robschmuecker/mPY8z/3/

function func2() {
    var chart = $('#container').highcharts();
    var data = chart.series[0].data;
    if (data.length) {
        for (var i = 0; i < data.length; i++) {
            var point = data[i];
            point.update([point.x *= 1000, point.y *= 1000]);
        }
        divide /= 1000;
        chart.yAxis[0].setTitle({
            text: 'Surplus of Electrical Cable (m)'
        });
        chart.xAxis[0].setTitle({
            text: 'Electric Cables (m)'
        });
    }
    chart.tooltip.options.formatter = function(){return this.point.x + ' m,' + this.point.y + ' m';};
};