Fixing the decimals on y axis to 5 places - highcharts

Question

I am trying to solve the following three problems
Decimal Places on Y Axis (all Axis) - should be constant 5
Decimal Places on Tooltip - should be constant 5
Adding a Suffix to all points on the tooltip
I need to keep the values shown on the on Y Axis fixed to 5 decimal places ( say 0.96724 or 1.55400 ) as received from the data feed.
I have forked and created a new jsfiddle to highlight the problem. This shows only upto two digits.
From various examples, I tried to create a tooltip, but it did not worked.
Any help or pointers would be highly appreciated. Created a jsfiddle below
Regards
Amit
http://jsfiddle.net/amonga141/tgz469a5/2/
// Some styling options for yAxis
Highcharts.theme = {
yAxis: {
gridLineWidth: 1,
gridLineColor: "rgb(240, 240, 240)",
minorGridLineColor: 'rgba(255, 255, 255, 0.07)',
lineColor: "rgb(241, 141, 5)",
lineWidth: 1,
tickColor: "rgb(241, 141, 5)",
tickWidth: 1,
showEmpty: false,
labels: {
style: {
color: 'rgb(102, 102, 102)',
fontWeight: 'bold'
}
},
title: {
style: {
color: 'rgb(229, 64, 40)',
font: "bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif"
}
}
}
};
// Apply the styling options
Highcharts.setOptions(Highcharts.theme);
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Data generator helper
function data(start, end, samples, min, max) {
var temp = [];
var range = ~~ ((end - start) / samples);
for (var i = 1; i < samples; i++) {
temp.push([start.getTime() + range * i, min + Math.random() * (max - min)]);
}
return temp;
}
//
var tooltipSuffix ='<br> TTIP Sufix:Suffix';
// Create a timer
var now = new Date();
var start = new Date(now - 60000);
var example_data = [{
name: 'Signal 1',
data: data(start, now, 20, 1.55478, 1.55481),
yAxis: 0
}, {
name: "Signal 2",
data: data(start, now, 20, 1.32419, 1.13253),
yAxis: 1
}, {
name: "Signal 3",
data: data(start, now, 20, 0.97456, 0.97545),
yAxis: 2
}];
//////////////////////
// Chart definition //
//////////////////////
var chart = $("#chart").highcharts({
legend: {
enabled: true
},
chart: {
animation: Highcharts.svg,
events: {
load: function () {
// set up the updating of the chart each second
var chart = this,
series = chart.series;
setInterval(function () {
var x = new Date(); // current time
series[0].addPoint(data(x, x, 2, 1.55678, 1.59133)[0], false, true);
series[1].addPoint(data(x, x, 2, 1.33456, 1.39921)[0], false, true);
series[2].addPoint(data(x, x, 2, 0.95989, 0.99092)[0], false, true);
chart.redraw();
}, 2000);
}
}
},
yAxis: [{
opposite: false,
showRects: true,
offset: 40,
title: {
text: 'Scale 1'
}
}, {
opposite: true,
showRects: true,
offset: 90,
title: {
text: 'Scale 2'
}
}, {
opposite: false,
showRects: true,
offset: 140,
title: {
text: 'Scale 3'
}
}],
xAxis: {
type: 'datetime'
},
// tooltip: {
// xDateFormat: '%A, %b %e, %H:%M:%S', // Shows only [Day, Mon dd, hh:mi:ss]
// shared: true,
// pointFormat: ' <span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>'+tooltipSuffix,
// valueDecimals: 5,
// crosshairs: true
// } ,
series: example_data
});
<div id="chart"></div>

Answer 1

See Working fiddle with your code here
For labels use following in your options of yAxis.
labels: {
format: '{value:.5f}',
}
for tooltip see the formatter function below
tooltip: {
shared: true,
pointFormat: ' <span style="color:{series.color}">{series.name}</span>: <b>{point.y:.5f}</b>'+tooltipSuffix+' <br/>',
}