Built linear gauge with highcharts (with pointer) - highcharts

Question

I'm trying to recreate a linear gauge chart of fusionchart in highcharts. This is the example that I am trying to recreate.
Head:
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<div id="chart-container">FusionCharts will render here</div>
Body:
FusionCharts.ready(function () {
var cpuGauge = new FusionCharts({
type: 'hlineargauge',
renderAt: 'chart-container',
id: 'cpu-linear-gauge',
width: '400',
height: '190',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"lowerLimit": "-1.9",
"upperLimit": "4.4",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"pointerBgColor": "#000000",
"baseFontColor": "#000000",
"decimalSeparator": ",",
"forceDecimals": "1",
"decimals": "1",
"valueFontBold": "0"
},
"colorRange": {
"color": [
{
"minValue": "-1.9",
"maxValue": "-0.1",
"label": "",
"code": "#e51b1b",
},
{
"minValue": "-0.1",
"maxValue": "1.0",
"label": "",
"code": "#fa7921",
},
{
"minValue": "1.0",
"maxValue": "1.5",
"label": "",
"code": "#fde74c",
},
{
"minValue": "1.5",
"maxValue": "4.4",
"label": "",
"code": "#9bc53d",
}
]
},
"pointers": {
"pointer": [
{
"value": "2"
}
]
},
}
})
.render();
});
The highcharts chart must take over the following properties:
Negative values
At least 4 groups (colors)
Pointer (indication marker) with number at top
In addition, I would really appreciate if there is an animation where you can see the pointer moving.
The bullet graph from highcharts comes closest to the fusionchart. I have made a first step (example) with this graph
Head:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="container1"></div>
Body:
Highcharts.setOptions({
chart: {
inverted: true,
marginLeft: 135,
type: 'bullet'
},
title: {
text: null
},
legend: {
enabled: false
},
yAxis: {
gridLineWidth: 0
},
plotOptions: {
series: {
pointPadding: 0.25,
borderWidth: 0,
color: '#000',
targetOptions: {
width: '200%'
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
}
});
Highcharts.chart('container1', {
chart: {
marginTop: 40
},
title: {
text: ''
},
xAxis: {
categories: "P"
},
yAxis: {
plotBands: [{
from: -1.9,
to: -0.1,
color: '#e51b1b'
}, {
from: -0.1,
to: 1,
color: '#fa7921'
}, {
from: 1,
to: 1.5,
color: '#fde74c'
}, {
from: 1.5,
to: 4.4,
color: '#9bc53d'
}],
labels: {
format: '{value}%'
},
title: null
},
series: [{
data: [{
y: 0,
target: 2
}]
}],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});
CSS:
#container1 {
max-width: 800px;
height: 115px;
margin: 1em auto;
}
But encounter a number of problems:
Negative numbers are not working
Pointer
Maximum is not shown (stops before 4.4)

Answer 1

With reference to this post. I have modified this chart with yAxis.tickPositioner and min, max property of yAxis
$(function () {
/**
* Highcharts Linear-Gauge series plugin
*/
(function (H) {
var defaultPlotOptions = H.getOptions().plotOptions,
columnType = H.seriesTypes.column,
wrap = H.wrap,
each = H.each;
defaultPlotOptions.lineargauge = H.merge(defaultPlotOptions.column, {});
H.seriesTypes.lineargauge = H.extendClass(columnType, {
type: 'lineargauge',
//inverted: true,
setVisible: function () {
columnType.prototype.setVisible.apply(this, arguments);
if (this.markLine) {
this.markLine[this.visible ? 'show' : 'hide']();
}
},
drawPoints: function () {
// Draw the Column like always
columnType.prototype.drawPoints.apply(this, arguments);
// Add a Marker
var series = this,
chart = this.chart,
inverted = chart.inverted,
xAxis = this.xAxis,
yAxis = this.yAxis,
point = this.points[0], // we know there is only 1 point
markLine = this.markLine,
ani = markLine ? 'animate' : 'attr';
// Hide column
point.graphic.hide();
if (!markLine) {
var path = inverted ? ['M', 0, 0, 'L', -5, -5, 'L', 5, -5, 'L', 0, 0, 'L', 0, 0 + xAxis.len] : ['M', 0, 0, 'L', -5, -5, 'L', -5, 5,'L', 0, 0, 'L', xAxis.len, 0];
markLine = this.markLine = chart.renderer.path(path)
.attr({
fill: series.color,
stroke: series.color,
'stroke-width': 1
}).add();
}
markLine[ani]({
translateX: inverted ? xAxis.left + yAxis.translate(point.y) : xAxis.left,
translateY: inverted ? xAxis.top : yAxis.top + yAxis.len - yAxis.translate(point.y)
});
}
});
})(Highcharts);
$('#container').highcharts({
chart: {
type: 'lineargauge',
inverted: true
},
title: {
text: 'A Horizontal Linear Gauge'
},
xAxis: {
lineColor: '#C0C0C0',
labels: {
enabled: false
},
tickLength: 0,
},
yAxis: {
min: -1.9,
max: 4.4,
tickPositions: [-1.9, -0.1,1,1.5 ,4.4],
tickLength: 1,
tickWidth: 1,
tickColor: '#C0C0C0',
gridLineColor: '#C0C0C0',
gridLineWidth: 1,
minorTickInterval: 5,
minorTickWidth: 1,
minorTickLength: 5,
minorGridLineWidth: 0,
startOnTick: true,
endOnTick: true,
title: null,
labels: {
format: '{value}%'
},
plotBands: [{
from:-1.9,
to: -0.1,
color: 'rgba(229, 27, 27, 1)'
}, {
from: -0.1,
to: 1.0,
color: 'rgba(250, 121, 33, 1)'
}, {
from: 1.0,
to: 1.5,
color: 'rgba(253, 231, 76, 1)'
},
{
from: 1.5,
to: 4.4,
color: 'rgba(155, 197, 61, 1)'
}]
},
legend: {
enabled: false
},
series: [{
data: [1.1],
color: '#000000',
dataLabels: {
enabled: true,
align: 'center',
format: '{point.y}%',
y: 10,
}
}]
}, // Add some life
function (chart) {
setInterval(function () {
Highcharts.each(chart.series, function (serie) {
var point = serie.points[0],
newVal,
inc = (Math.random() - 0.5) *10;
newVal = point.y + inc;
if (newVal < -1.9 || newVal > 4.4) {
newVal = point.y - inc;
}
point.update(Math.floor(newVal));
});
}, 2000);
});
});
Fiddle demo