Highchart tooltip issue

Question

I am using Highcharts. Can any one tell me how to assign different tooltip suffix value to different points of same series? To show the tooltip like: this.X:this:y this.suffix value

I am using below code to bind Highcharts:

var options = {
    chart: {
        height: 122,
        width: 387,
        type: 'line',
        borderWidth: 1,
        borderColor: '#EBBA95',
        borderRadius: 1
    },
    credits: {
        enabled: false
    },
    title: {
        text: titleText
    },
    subtitle: {
        text: subtitletext
    },
    xAxis: {
        title: {
            text: xAxistitle
        },
        categories: [],
        labels: { enabled: false }
    },
    yAxis: {
        title: {
            text: yAxistitle
        },
        labels: { enabled: true },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },

    plotOptions: {
        line: {
            dataLabels: {
                enabled: false,
                style: {
                    textShadow: '0 0 3px white, 0 0 3px white'
                }
            },
            events: {
                legendItemClick: function () {
                    return false; // <== returning false will cancel the default action
                }
            },
            showInLegend: true,
            enableMouseTracking: true
        },
       /* tooltip: {
            shared: true
            //,
            //formatter: function ()
            //{
            //    return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>, in series ' + this.series.valueSuffix;
            //}

        },*/
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y} KKKK </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {

                        var series = this.series;
                        for (var count = 0; count < series.options.data.length; count++) {
                            var IndexOfSelectedDataValue = series.options.data.indexOf(this.y);
                            var IndexOfSelectedIDValue = series.options.vitalid[IndexOfSelectedDataValue];
                            var URL = CrmServerURL + 'main.aspx?etc=' + vitalsEntityObjectTypeCode + "&pagetype=entityrecord&id=%7b" + IndexOfSelectedIDValue + "%7D";
                            PIH.PIHClass.OpenUrl(URL);
                            break;
                        }

                    }
                }
            }
        }

    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [],
    navigation: {
        buttonOptions: {
            enabled: false
        }
    }
};


seriesdata1.reverse();
seriesdata2.reverse();
var StartDate = seriesdata1[0].date;
var EndDate = seriesdata1[seriesdata1.length - 1].date;

document.getElementById("Fromdate").innerHTML = StartDate;
document.getElementById("Todate").innerHTML = EndDate;

if (seriesdata1.length > 0) {
    options.series.push({ name: '', data: [], tooltip: '', vitalid: [] }); /// add new series

    for (i = 0; i < seriesdata1.length; i++) {
        options.xAxis.categories[i] = seriesdata1[i].date;
    }
    for (i = 0; i < seriesdata1.length; i++) {
        options.series[0].name = seriesdata1[i].name;
        options.series[0].data[i] = seriesdata1[i].data;
        options.series[0].tooltip = seriesdata1[i].tooltip;
        options.series[0].vitalid[i] = seriesdata1[i].vitalid;
    }
}

if (seriesdata2.length > 0) {
    options.series.push({ name: '', data: [], tooltip: '', vitalid: [] }); /// add new series

    for (i = 0; i < seriesdata2.length; i++) {
        options.series[1].name = seriesdata2[i].name;
        options.series[1].data[i] = seriesdata2[i].data;
        options.series[1].tooltip = seriesdata2[i].tooltip;
        options.series[1].vitalid[i] = seriesdata2[i].vitalid;

    }
}
$("#canvas").highcharts(options);

For example: for a Temperature graph I am showing 10 points in the graph, but different points have different unit of measurement like Fahrenheit & Celsius. I am passing unit of measurement as point Value suffix.

But in my case last applied Value suffix is applied to all points of same series.

I want tooltip as per their Unit of measurement/value suffix (eg. 15/5/2014 Temp 90 °C).

Answer 1

you can try some thing like this

tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            }

Answer 2

You can use tooltip formatter and customise content of your tooltip, including conditions and custom logic.

Answer 3

Hi i tried tool tip formatter to use in following way

if (TooltipMeasureunit != '') {
                     Tempdata.push({ name: 'Temp', vitalid: response[count].attributes.ccx_vitalsid.value, data: Temperature, date: RecordDate,
                                        tooltip: {
                                            formatter: function () {
                                                return valueSuffix = this.TooltipMeasureunit
                                            }
                                        }
                                        });
                                }
                                else if (TooltipMeasureunit == '') {
                                    Tempdata.push({
                                        name: 'Temp', vitalid: response[count].attributes.ccx_vitalsid.value, data: Temperature, date: RecordDate,
                                        tooltip: {
                                            formatter: function () {
                                                return valueSuffix=this.TooltipMeasureunit

                                            }
                                            //shared: false
                                        }
                                    });