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

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.

Related

Custom gauge chart not working when resize

I need customize gauge highchart as
I customized it as jsfiddle code.
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 2,
tickWidth: 10,
tickInterval: 10,
lineColor: '#fff',
minorTickInterval: null,
labels: {
enabled: false
},
minorTickPosition: 'inside',
tickPosition: 'inside',
tickPixelInterval: 10,
tickLength: '50',
tickColor: '#fff',
zIndex: 6,
minorTickWidth: 0,
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
rounded: false
},
gauge: {
dial: {
radius: '40',
backgroundColor: '#1d96e0',
baseWidth: 20,
topWidth: 1,
baseLength: '5%', // of radius
rearLength: '0%'
},
pivot: {
radius: '10',
backgroundColor: '#1d96e0'
}
},
series: {
dataLabels: {
enabled: true
}
}
},
};
https://jsfiddle.net/viethien/9L4xcho3/5/
But when I resize gauge chart, it display not good as
I am concern about calculate width of gauge panel to fit style.
Thanks
You can dynamically calculate and set tickLength property for the axis:
var allowChartUpdate = true;
var gaugeOptions = {
chart: {
type: 'solidgauge',
events: {
render: function() {
var tickLength = this.pane[0].group.getBBox().width / 4
if (allowChartUpdate) {
allowChartUpdate = false;
this.yAxis[0].update({
tickLength: tickLength
});
allowChartUpdate = true;
}
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/vbctd9ef/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#update

Highchart gauge with marker for setting threshold value

I want to get a gauge like this with the black marker for setting threshold value and inner "blue" data as load.
I have used Highcharts (of which I don't have much knowledge) in my code to obtain the required gauge as close as possible, however what I am getting is something like below which is just load without "marker":
with the code as below:
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '80%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.6, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100
},
credits: {
enabled: false
},
series: [{
name: 'Load',
data: [{
radius: '100%',
innerRadius: '80%',
y: Number($scope.user.threshold)
}],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
('black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">%</span></div>'
},
tooltip: {
valueSuffix: ' %'
}
}]
}));
Any idea about how can I get the first gauge? Also it should be able to tell when the load crosses the threshold value.
EDIT (Solved):
yAxis: {
plotBands: [{
from: 60,
to: 61,
color: 'black',
thickness: '45%',
outerRadius: '105%',
zIndex: 5
}], .... }
Added this to my code which made it work.
You can achieve this by using plot bands:
yAxis: {
plotBands: {
from: 70,
to: 71,
color: '#DF5353',
thickness: '40%'
},
...
}
Where thickness is the length of the radius on your marker (easier to understand by looking at the graph).
There is a lot of configuration options here, it should be possible to figure out by looking at the API.
Working example: http://jsfiddle.net/ewolden/6rL9u37d/2/
API on yAxis.plotBands: https://api.highcharts.com/highcharts/yAxis.plotBands

Highcharts show percentage in the center of the solid gauge chart

I am very new to Highcharts. I am trying to use the solid gauge. The problem is that the percentage text is not present in the center. Is there anyway to put the percentage in the center of the chart?
Here is the code:
$(function () {
Highcharts.chart('container', {
chart: {
type: 'solidgauge'
},
title: {
text: ''
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth, labelHeight) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
center: ['50%', '27%'],
startAngle: 0,
endAngle: 360,
background: [{ // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0,
}],
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}]
}]
},
});
The x and y in the label option can set the position but I want it to be dynamic.
Secondly I want it to be always shown. Here is the result of the code above.

trying to draw dotted lines over the chart

Hey Guys I'm trying to draw dotted lines over my highcharts chart but when I try this the lines either push the chart out of position or skip over the chart and continue past it.I'm also trying to put labels on the top of each barchart too
here's my code
$(function () {
$('#container5').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
tooltip: { enabled: false },
exporting: {
enabled:false
},
credits: {
enabled: false
},
legend: {
enabled:false
},
xAxis: {
labels:
{
enabled: false
},
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
categories: ['']
},
yAxis: {
labels:
{
enabled: false
},
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
min: 0,
title: {
text: ' '
},
},
plotOptions: {
column: {
stacking: 'normal',
animation: false
},
series: {
states: {
hover: {
enabled: false
}
}
}
},
series: [{
name: '10',
data: [10],
pointWidth: 50,
groupPadding: 0,
color: '#f7a35c'
}, {
name: '12',
data: [12],
pointWidth: 50,
groupPadding: 0,
color: '#004A98'
}, {
name: '12',
data: [12],
pointWidth: 50,
groupPadding: 0,
color: '#509ADC'
}]
});
});
and
<div class="col-md-2" id="container5" style="width: 200px; height: 700px; margin:auto"></div>
It looks like
Picture one
but I want it to look like this
Picture two
You can use Renderer.path to add custom line in the chart.
chart.renderer.path(['M', 0, 0, 'L', 100, 100])
.attr({
'stroke-width': 2,
stroke: 'red'
})
.add();
Deffine your plot lines on YAxis like this. Demo
yAxis: {
title: {
...
},
plotLines: [{
value: minValue,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter minimum'
}
}, {
value: maxValue,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter maximum'
}
}]
}
EDIT
In addition to, if you want to align the plotLines to the left you can try this:
Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
return ['M',x*2,y + height,'L',0,y + width];
};
DEMO

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.

Categories