We Keep Coding

How to change gauge meter color based on value in highcharts

I have a gauge meter chart in highcharts, here I want to change the color of needle based on value while rotating.
Here below is my code:
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
},
title: {
text: 'PV Generation'
},
tooltip: {
enabled: false
},
pane: {
center: ['50%', '55%'],
size: '75%',
startAngle: -100,
endAngle: 100,
background: {
backgroundColor: '#aaaaaa',
innerRadius: '95%',
outerRadius: '100%',
shape: 'arc',
},
},
yAxis: [{
lineWidth: 0,
min: 0,
max: 900,
tickInterval: 50,
tickPosition: 'outside',
minorTickPosition: 'outside',
tickLength: 15,
minorTickLength: 5,
labels: {
distance: 25,
},
offset: 5,
endOnTick: false,
title: {
y: -70
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
},
plotBands: [{
from: 0,
to: 250,
color: '#55BF3B' // green
}, {
from: 250,
to: 700,
color: '#DDDF0D', // yellow
series: [{
data: [{
id: 'hour',
y: 400,
yAxis: 0,
dial: {
backgroundColor: '#000000',
color: 'red',
radius: '100%',
baseWidth: 10,
baseLength: '5%',
baseWidth: 15,
rearLength: '0%',
}
}]
}]
}, {
from: 700,
to: 900,
color: '#DF5353' // red
}]
}],
series: [{
name: 'Speed',
data: [{
y: 450
}]
}]
},
// Add some life
function(chart) {
setInterval(function() {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + 4 * inc;
if (newVal < 0 || newVal > 900) {
newVal = point.y - 4 * inc;
}
chart.yAxis[0].removePlotBand('plot-band-1');
chart.yAxis[0].addPlotBand({
from: 0,
to: newVal,
// color: '#000000',
thickness: '10%',
id: 'plot-band-1'
});
point.update(newVal);
}, 4000);
});
$("#container").find("circle").attr("r", 15);
$("#container").find("circle").attr("fill", "red");
// $("#container").find("series").data("fill", "black");
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

You can do this by changing some parts of your update code. I have done the following:
Remove point.update(newVal)
Add an update that updates the needle, the pivot and the value based on if the value is increasing or decreasing:
if (inc > 0) {
chart.series[0].update({
dial: {
backgroundColor: 'green',
},
pivot: {
backgroundColor: 'green'
},
data: [{
y: newVal
}]
}, true);
} else {
chart.series[0].update({
dial: {
backgroundColor: 'red',
},
pivot: {
backgroundColor: 'red'
},
data: [{
y: newVal
}]
}, true);
}
Additionally, I removed this:
$("#container").find("circle").attr("r", 15);
$("#container").find("circle").attr("fill", "red");
And instead put this in the series definition:
series: [{
name: 'Speed',
data: [{
y: 450
}],
pivot: {
radius: 15,
backgroundColor: 'red'
}
}]
That way it is a highchart property and will not get overwritten when we update the the series.
API refs: series.gauge and Highcharts.update
Full working example:
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
},
title: {
text: 'PV Generation'
},
tooltip: {
enabled: false
},
pane: {
center: ['50%', '55%'],
size: '75%',
startAngle: -100,
endAngle: 100,
background: {
backgroundColor: '#aaaaaa',
innerRadius: '95%',
outerRadius: '100%',
shape: 'arc',
},
},
yAxis: [{
lineWidth: 0,
min: 0,
max: 900,
tickInterval: 50,
tickPosition: 'outside',
minorTickPosition: 'outside',
tickLength: 15,
minorTickLength: 5,
labels: {
distance: 25,
},
offset: 5,
endOnTick: false,
title: {
y: -70
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
},
plotBands: [{
from: 0,
to: 250,
color: '#55BF3B' // green
}, {
from: 250,
to: 700,
color: '#DDDF0D', // yellow
series: [{
data: [{
id: 'hour',
y: 400,
yAxis: 0,
dial: {
backgroundColor: '#000000',
color: 'red',
radius: '100%',
baseWidth: 10,
baseLength: '5%',
baseWidth: 15,
rearLength: '0%',
}
}]
}]
}, {
from: 700,
to: 900,
color: '#DF5353' // red
}]
}],
series: [{
name: 'Speed',
data: [{
y: 450
}],
pivot: {
radius: 15,
backgroundColor: 'red'
}
}]
},
// Add some life
function(chart) {
setInterval(function() {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + 4 * inc;
if (newVal < 0 || newVal > 900) {
newVal = point.y - 4 * inc;
}
chart.yAxis[0].removePlotBand('plot-band-1');
chart.yAxis[0].addPlotBand({
from: 0,
to: newVal,
// color: '#000000',
thickness: '10%',
id: 'plot-band-1'
});
if (inc > 0) {
chart.series[0].update({
dial: {
backgroundColor: 'green',
},
pivot: {
backgroundColor: 'green'
},
data: [{
y: newVal
}]
}, true);
} else {
chart.series[0].update({
dial: {
backgroundColor: 'red',
},
pivot: {
backgroundColor: 'red'
},
data: [{
y: newVal
}]
}, true);
}
}, 4000);
});
//$("#container").find("circle").attr("r", 15);
//$("#container").find("circle").attr("fill", "red");
// $("#container").find("series").data("fill", "black");
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Edit to deal with ranges per color:
I.e. 0 - 250: green, 250-700: yellow, 700-900: red
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
},
title: {
text: 'PV Generation'
},
tooltip: {
enabled: false
},
pane: {
center: ['50%', '55%'],
size: '75%',
startAngle: -100,
endAngle: 100,
background: {
backgroundColor: '#aaaaaa',
innerRadius: '95%',
outerRadius: '100%',
shape: 'arc',
},
},
yAxis: [{
lineWidth: 0,
min: 0,
max: 900,
tickInterval: 50,
tickPosition: 'outside',
minorTickPosition: 'outside',
tickLength: 15,
minorTickLength: 5,
labels: {
distance: 25,
},
offset: 5,
endOnTick: false,
title: {
y: -70
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
},
plotBands: [{
from: 0,
to: 250,
color: '#55BF3B' // green
}, {
from: 250,
to: 700,
color: '#DDDF0D', // yellow
series: [{
data: [{
id: 'hour',
y: 400,
yAxis: 0,
dial: {
backgroundColor: '#000000',
color: 'red',
radius: '100%',
baseWidth: 10,
baseLength: '5%',
baseWidth: 15,
rearLength: '0%',
}
}]
}]
}, {
from: 700,
to: 900,
color: '#DF5353' // red
}]
}],
series: [{
name: 'Speed',
data: [{
y: 450
}],
dial: {
backgroundColor: '#DDDF0D',
},
pivot: {
radius: 15,
backgroundColor: '#DDDF0D'
}
}]
},
// Add some life
function(chart) {
setInterval(function() {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + 4 * inc;
if (newVal < 0 || newVal > 900) {
newVal = point.y - 4 * inc;
}
chart.yAxis[0].removePlotBand('plot-band-1');
chart.yAxis[0].addPlotBand({
from: 0,
to: newVal,
// color: '#000000',
thickness: '10%',
id: 'plot-band-1'
});
if (newVal < 250) {
chart.series[0].update({
dial: {
backgroundColor: 'green',
},
pivot: {
backgroundColor: 'green'
},
data: [{
y: newVal
}]
}, true);
} else if(newVal > 250 && newVal < 700){
chart.series[0].update({
dial: {
backgroundColor: '#DDDF0D',
},
pivot: {
backgroundColor: '#DDDF0D'
},
data: [{
y: newVal
}]
}, true);
} else {
chart.series[0].update({
dial: {
backgroundColor: 'red',
},
pivot: {
backgroundColor: 'red'
},
data: [{
y: newVal
}]
}, true);
}
}, 4000);
});
//$("#container").find("circle").attr("r", 15);
//$("#container").find("circle").attr("fill", "red");
// $("#container").find("series").data("fill", "black");
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

You can use events.render function to detect the value of y and change the color of the pointer accordingly
Updating your existing code
events: {
render: function() {
newVal = this.series[0].data[0].y;
graph = this.series[0].data[0].graphic;
if (newVal >= 0 && newVal < 250) {
graph.attr({
fill: '#55BF3B'
});
this.series[0].pivot.attr({
fill: '#55BF3B'
});
}
if (newVal >= 250 && newVal < 700) {
graph.attr({
fill: '#DDDF0D'
});
this.series[0].pivot.attr({
fill: '#DDDF0D'
});
}
if (newVal >= 700 && newVal < 900) {
graph.attr({
fill: '#DF5353'
});
this.series[0].pivot.attr({
fill: '#DF5353'
});
}
}
}
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
events: {
render: function() {
newVal = this.series[0].data[0].y;
graph = this.series[0].data[0].graphic;
if (newVal >= 0 && newVal < 250) {
graph.attr({
fill: '#55BF3B'
});
this.series[0].pivot.attr({
fill: '#55BF3B'
});
}
if (newVal >= 250 && newVal < 700) {
graph.attr({
fill: '#DDDF0D'
});
this.series[0].pivot.attr({
fill: '#DDDF0D'
});
}
if (newVal >= 700 && newVal < 900) {
graph.attr({
fill: '#DF5353'
});
this.series[0].pivot.attr({
fill: '#DF5353'
});
}
}
}
},
title: {
text: 'PV Generation'
},
tooltip: {
enabled: false
},
pane: {
center: ['50%', '55%'],
size: '75%',
startAngle: -100,
endAngle: 100,
background: {
backgroundColor: '#aaaaaa',
innerRadius: '95%',
outerRadius: '100%',
shape: 'arc',
},
},
yAxis: [{
lineWidth: 0,
min: 0,
max: 900,
tickInterval: 50,
tickPosition: 'outside',
minorTickPosition: 'outside',
tickLength: 15,
minorTickLength: 5,
labels: {
distance: 25,
},
offset: 5,
endOnTick: false,
title: {
y: -70
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
},
plotBands: [{
from: 0,
to: 250,
color: '#55BF3B' // green
}, {
from: 250,
to: 700,
color: '#DDDF0D', // yellow
series: [{
data: [{
id: 'hour',
y: 400,
yAxis: 0,
dial: {
backgroundColor: '#000000',
color: 'red',
radius: '100%',
baseWidth: 10,
baseLength: '5%',
baseWidth: 15,
rearLength: '0%',
}
}]
}]
}, {
from: 700,
to: 900,
color: '#DF5353' // red
}]
}],
series: [{
name: 'Speed',
data: [{
y: 450
}],
pivot: {
radius: 15,
}
}]
},
// Add some life
function(chart) {
setInterval(function() {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + 4 * inc;
if (newVal < 0 || newVal > 900) {
newVal = point.y - 4 * inc;
}
chart.yAxis[0].removePlotBand('plot-band-1');
chart.yAxis[0].addPlotBand({
from: 0,
to: newVal,
// color: '#000000',
thickness: '10%',
id: 'plot-band-1'
});
point.update(newVal);
}, 1000);
});
// $("#container").find("circle").attr("r", 15);
// $("#container").find("circle").attr("fill", "red");
// $("#container").find("series").data("fill", "black");
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Fiddle demo

Highcharts Gauge: Adding Icons

I'm trying to add icons in dataLabels, I successfully added some HTML like this return '<span style="color:#89891C">Partially rejected: ' + partial + '</span><br/>' +'<span style="color:#933">Rejected: ' + rejected + '</span>';, but now I want to add icons instead, I'm using **Ionicons*. Here's the code:
var chart=Highcharts.chart(id, {
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor:'rgba(255, 255, 255, 0.0)'
},
exporting: { enabled: false },
title: {
text: ''
},
pane: {
startAngle: -150,
endAngle: 150,
background: {
from: 0,
to: partial+rejected,
backgroundColor: '#f55',
innerRadius: '85%',
outerRadius: '50%',
shape: 'arc',
},
},
yAxis: [{
lineWidth: 0,
min: 0,
max: parseInt(val),
tickInterval: 1,
tickPosition: 'outside',
minorTickColor: '#FF0000',
tickColor: '#FF0000',
tickWidth: 2,
tickLength: 10,
minorTickPosition: 'outside',
tickLength: 15,
minorTickLength: 5,
title:{text:'Total: '+val,style:{ color:"#333" }},
labels: {
distance: 25,
},
offset: 5,
endOnTick: false,
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
},
plotBands: [{
from: 0,
to: delivered,
color: '#21A121',
thickness: '15%',
id: 'plot-band-1'
}]
}],
series: [{
name: 'Managed',
data: [{
id: 'deliver',
y: parseInt(total),
dial: {
backgroundColor:'#D9972E',
radius: '100%',
baseWidth: 10,
baseLength: '5%',
baseWidth: 15,
rearLength: '0%',
}
}],
dataLabels: {
formatter: function () {
var total = this.y;
return '<i class="ion-information-circled" title="RP: '+partial+'" style="color:#EEF007"></i><i class="ion-information-circled" title="RT: '+rejected+'" style="color:#F00707"></i>';
},
backgroundColor: {
linearGradient: {
x1: 10,
y1: 10,
x2: 10,
y2: 11
},
stops: [
[0, '#DDD'],
[1, '#FFF']
]
}
},
tooltip: {
valueSuffix: ' '
}
}]
});
The part I'm trying to get right is at dataLabels, if there's any information you may need to understand what I'm trying to achieve, just ask me, thanks in advance

Simply, get Ionicons CSS file (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css) and return adequate icon in dataLabels.formatter function. You need to remember that the property useHTML must be set to true.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.formatter
Example:
http://jsfiddle.net/h0xLzv8h/

Highcharts - Gauge chart data label not positioning correctly

I'm building a vertical gauge and am having problems applying a custom image in place of the default marker.
Although the image renders, it's placement is off. I can't seem to get it to point exactly where the marker is positioned and I'm not sure if applying a static offset value to the 'y' attribute is the right approach.
Here's a fiddle.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
marginBottom: 25,
marginTop: 70,
marginLeft: 65,
marginRight: 10,
},
xAxis: {
categories: ['One'],
lineColor: 'white',
labels: {
enabled: false
},
tickLength: 0,
min: 0,
max: 2
},
plotOptions: {
column: {
stacking: 'normal',
animation: false,
borderWidth: 0,
}
},
yAxis: {
min: 0,
max: 9026,
tickInterval: 9026,
tickLength: 0,
tickWidth: 0,
tickColor: '#C0C0C0',
gridLineColor: '#C0C0C0',
gridLineWidth: 0,
minorTickInterval: 25,
minorTickWidth: 0,
minorTickLength: 0,
minorGridLineWidth: 0,
title: null,
labels: {
formatter: function () {
if (this.isFirst || this.isLast) {
return this.value;
}
},
x: 0
},
},
legend: {
enabled: false
},
series: [
{
data: [4513],
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'red'],
[1, 'orange']
]
}
},
{
data: [4513],
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'orange'],
[1, 'green']
]
}
},
{
type: 'scatter',
data: [3120],
marker: {
enabled: true,
symbol: 'circle'
},
dataLabels: {
useHTML: true,
formatter: function () {
return '<img width="40px" height="40px" src="http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png" />'
},
enabled: true,
align: 'right',
x: -3,
y: 2,
overflow: "justify"
}
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 178px; height: 242px;"></div>
Would appreciate any help, thanks!

You should adjust the image position via x, y properties.
x: 0,
y: 30,
example: https://jsfiddle.net/ptezqnbf/1/
or even better, use renderer.image and control the position directly.
function renderImage() {
var chart = this,
point = chart.get('point'),
imgWidth = 40,
imgHeight = 40;
if (!chart.dataLabelImg) {
chart.dataLabelImg = this.renderer.image('http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png', -1000, -1000, imgWidth, imgHeight).add(point.series.dataLabelsGroup);
}
chart.dataLabelImg.attr({
x: point.graphic.x + (imgWidth - 15) / 2,
y: point.graphic.y - (imgHeight - 10) / 2
});
example: https://jsfiddle.net/tpp1gdau/1/

How to hide intermediate values of solid gauge chart of highcharts?

I wanted to remove intermediate number that are appeared on solid gauge chart.
e.g. I want to hide 100 from chart given in link.
Solid gauge chart
Here is my code of chart.
function myfun(data) {
var gaugeOptions = {
chart: {
renderTo: 'mydiv',
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (window.Highcharts.theme && window.Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.0, '#DF5353'], // red
[0.5, '#DF5353'],
[0.51, '#DDDF0D'],
[0.79, '#DDDF0D'], // yellow
[0.8, '#55BF3B'],
[1, '#55BF3B'] // green
],
lineWidth: 0,
minTickInterval: 100,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -110
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#mydiv')
.highcharts(
window.Highcharts
.merge(
gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: ''
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [totalHealthScore],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((window.Highcharts
.theme && window.Highcharts.theme.contrastTextColor) || 'black') +
'">{y}</span><br/>' + '<span style="font-size:12px;color:silver">Score</span></div>'
},
tooltip: {
valueSuffix: ' Score'
}
}]
}));
}
How do I hide values 2.5 and 100 from charts given in the link??

You can affect the position of the ticks using tickInterval and startOnTick, e.g.
yAxis: {
tickInterval:200,
startOnTick:true,
http://jsfiddle.net/DdAr6/
http://api.highcharts.com/highcharts#yAxis.tickInterval

The number of steps need to be defined for the y axis.
In the speedometer's code:
yAxis: {
min: 0,
max: 200,
labels: {step:2},
title: {
text: 'Speed'
}
}
In the tachometer's code:
yAxis: {
min: 0,
max: 5,
labels: {step:2},
title: {
text: 'RPM'
}
}
See http://jsfiddle.net/y62sj/ for the full code.

Highcharts Gauge

I'm using highcharts and i'd like to show a big gauge(500x500px).
Resizing the gauge was quite easy, but the small block with the value in it doesn't resize. How can I make that small block bigger?
Thanks for the help!
jsFiddle: http://jsfiddle.net/AVd8k/
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
width: 500,
height: 500
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});

try this by replacing series (whole object) with:
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
},
dataLabels: {
enabled: true,
style: {
//fontWeight:'bold',
fontSize: '22px'
}
}
}]
Proof: http://jsfiddle.net/nmQfE/
Of course, you can adjust the font size as you want

It looks like the property you are after is:
plotOptions.gauge.dataLabels.style.fontSize
http://api.highcharts.com/highcharts#plotOptions.gauge.dataLabels.style
Try adding something like this to the options:
plotOptions: {
gauge: {
dataLabels: {
style: {
fontSize: '60px'
}
}
}
}
You may need to reposition it using the x and y properties.