Highchart tooltip issue - highcharts

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
}
});