Develop Reference

How to make Tick lines around Solid Gauge in Highcharts

I am working on highcharts and so much dependency on it so i cant use other plugins
$(function () {
var gaugeOptions = {
'chart': {
'type': 'solidgauge'
},
'title': null,
'tooltip': {
'enabled': false
},
'pane': {
'center': ['50%', '50%'],
'size': '100px',
'startAngle': 0,
'endAngle': 360,
'background': {
'backgroundColor': '#EEE',
'innerRadius': '90%',
'outerRadius': '100%',
'borderWidth': 0
}
},
'yAxis': {
'min': 0,
'max': 100,
'labels': {
'enabled': false
},
'lineWidth': 0,
'minorTickInterval': null,
'tickPixelInterval': 400,
'tickWidth': 0
},
'plotOptions': {
'solidgauge': {
'innerRadius': '90%'
}
},
'series': [{
'name': 'Speed',
'data': [50],
'dataLabels': {
'enabled': true,
useHTML: true,
format: '<div ><span style="font-size:15px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
'<span style="font-size:08px;color:Black">%</span> <br/><br/></div>',
borderWidth: 0
}
}]
};
debugger;
$('#Chart2').highcharts(gaugeOptions);
});
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '50%'],
size: '40%',
startAngle: 0,
endAngle: 360,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
enabled: false
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -20,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#sampleChart').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [80],
dataLabels: {
format: '<div ><span style="font-size:15px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
'<span style="font-size:12px;color:Black">%</span></div>',
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
});
http://jsfiddle.net/mmhukqtz/
this is my chart which i am using i want to give ticks on upper side of circle like this
And Also like this
Thankx For Help

You need to define a seperate pane and axis and set axis offset property to positive value - for the ticks outside the pane - or to negative value - for the ticks inside the pane.
Pane config:
pane: [{
size: '40%',
center: ['50%', '50%'],
background: {
innerRadius: '60%',
outerRadius: '100%'
}
}, {
size: '40%',
background: null
}]
Axis config:
yAxis: [{
min: 0,
max: 200,
tickWidth: 0,
minorTickInterval: null,
labels: {
enabled: false
},
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
]
}, {
linkedTo: 0,
pane: 1,
offset: 20, // offset property controls the distance from the pane
tickInterval: 10,
minorTickInterval: null,
lineWidth: 0,
labels: {
enabled: false
}
}],
Ticks are outside: http://jsfiddle.net/key8v7mn/
Ticks are inside: http://jsfiddle.net/key8v7mn/1/

Try this code in your yAxis:
tickLength: 5,
tickWidth: 4,
tickColor: 'black',
tickPosition: 'outside',
minorTickLength: 0,
tickInterval: 1,
tickInterval does the job.
Updated fiddle:
http://jsfiddle.net/jb242m6o/
tickPosition: "inside" means you will get ticks inside
tickPosition: "outside" means you will get ticks outside

Highcharts multiple yaxis plotband collision

I have been trying using angular gauge with multiple y axis. I have used offset axis property to avoid collision between them. However, plotband of the axes getting collided with each other. Is there any property to separate them out or any other workaround?
My try:
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -90,
endAngle: 90,
background: null
},
// the value axis
yAxis:[
{
min: 0,
max:100,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
labels: {
distance: 12,
rotation: 'auto'
},
offset: -30,
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
plotBands: [{
from: 0,
to: 10,
color: '#55BF3B',
}, {
from: 10,
to: 70,
color: '#DDDF0D',
}, {
from: 70,
to: 90,
color: '#DF5353',
}]
},
{
min: 0,
max:100,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
labels: {
distance: 12,
rotation: 'auto'
},
offset: 30,
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
plotBands: [{
from: 0,
to: 10,
color: 'red',
offset:30,// green
}, {
from: 10,
to: 70,
color: 'orange' // yellow
}, {
from: 70,
to: 90,
color: 'violet' // red
}]
}
],
series: [{
name: 'Speed',
data: [{
id: 'hour',
y: 90,
}],
},{
name: 'Speed',
data: [{
id: 'minute',
y: 50,
}],
},
]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
}, 3000);
}
});
$('.highcharts-axis text').click(function(){ alert($(this).text());
});
});
https://jsfiddle.net/n1djkxLr/8/

This issue is related with know bug, reported to our developers here: https://github.com/highcharts/highcharts/issues/5283

Is there a way to cap Highchart's Gauge at the max

Im looking to have a set min and max (0-200) and to cap the gauge line at the 200. The data could be over 200, but the line on the gauge would still need to cap at 200.
Is there a parameter to do this?
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
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: [555],
tooltip: {
valueSuffix: ' km/h'
}
}]

You can use plotOptions.gauge.wrap: false to prevent wrapping around.
The API description:
wrap: Boolean
When this option is true, the dial will wrap around the axes. For instance, in a full-range gauge going from 0 to 360, a value of 400 will point to 40. When wrap is false, the dial stops at 360. Defaults to true.
Example usage (JSFiddle):
plotOptions: {
gauge: {
wrap: false
}
}

Highcharts gauge not rendering text

I am trying to create a gauge using Highcharts.
In the gauge I want to render the text at the tip of the needle and the position of text should change when the needle tip position changes. I have already added the some text at the start positon and end position of gauge, I need to add third text according to needle tip.
Can you please have a look and let me know how I do it?
My jsfiddle link is http://jsfiddle.net/anchika/nszqbsgx/1/
var chart = new Highcharts.Chart({
chart: {
type: 'gauge',
renderTo: container,
marginTop: -60,
marginRight: 0,
spacingLeft: 0,
spacingBottom: 0,
backgroundColor: null,
},
pane: {
center: ['50%', '57%'],
size: '75%',
startAngle: -150,
endAngle: 150,
background: [{
borderColor: '#000',
}],
},
tooltip: {
enabled: false
},
title: {
text: null,
},
yAxis: {
min: 0,
max: 100,
title: {
y: -20,
useHTML: true,
text: 'graphTitle',
style: {
fontFamily: 'Raleway',
fontSize: '2em',
textAlign: 'center',
}
},
labels: {
enabled: false,
},
tickInterval: 16.66,
tickWidth: 5,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#000',
minorTickColor: '#000',
lineColor: null,
plotBands: [{
from: 0,
to: 33,
color: '#00A600', // green
outerRadius: '100%',
thickness: '15%'
}]
},
plotOptions: {
gauge: {
innerRadius: '90%',
dial: {
backgroundColor: 'rgba(0,0,0,0.4)',
}
}
},
credits: {
enabled: false
},
series: [{
data: [33],
dataLabels: {
useHTML: true,
//format: gaugeFormat, //Modify here to change the radial center values
borderWidth: 0,
style:{
fontFamily:'Raleway',
fontWeight: 'normal',
},
x: 5,
},
tooltip: {
enabled: false,
}
}]
},
function (chart) { // on complete
chart.renderer.text('End Time',500,370)
.css({
color: '#000',
fontSize: '16px'
})
.add();
chart.renderer.text('Start Time', 240, 370)
.css({
color: '#000',
fontSize: '16px'
})
.add();
});
Edit:
I want something like this link

I`m not sure that understand your question completely,
Please check this link
var chart = new Highcharts.Chart({
chart: {
type: 'gauge',
renderTo: container,
marginTop: -60,
marginRight: 0,
spacingLeft: 0,
spacingBottom: 0,
backgroundColor: null,
},
pane: {
center: ['50%', '57%'],
size: '60%',
startAngle: -150,
endAngle: 150,
background: [{
borderColor: '#000',
}],
},
tooltip: {
enabled: false
},
title: {
text: null,
},
yAxis: {
min: 0,
max: 100,
title: {
y: -20,
useHTML: true,
text: 'graphTitle',
style: {
fontFamily: 'Raleway',
fontSize: '2em',
textAlign: 'center',
}
},
labels: {
enabled: false,
},
tickInterval: 16.66,
tickWidth: 5,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#000',
minorTickColor: '#000',
lineColor: null,
plotBands: [{
from: 0,
to: 33,
color: '#00A600', // green
outerRadius: '100%',
thickness: '15%'
}]
},
plotOptions: {
gauge: {
innerRadius: '90%',
dial: {
backgroundColor: 'rgba(0,0,0,0.4)',
}
}
},
credits: {
enabled: false
},
series: [{
data: [100],
dataLabels: {
useHTML: true,
//format: gaugeFormat, //Modify here to change the radial center values
borderWidth: 0,
style:{
fontFamily:'Raleway',
fontWeight: 'normal',
},
x: 5,
},
tooltip: {
enabled: false,
}
}]
},
function (chart) { // on complete
console.log(chart); chart.renderer.text(chart.series[0].data[0].y,140+chart.series[0].data[0].y*2,350)
.css({
color: '#000',
fontSize: '16px'
})
.add();
});

HighCharts speed o meter query

I am using highcharts speed o meter with PHP and MYSQL. It is working fine but the problem is that when I merge the JavaScript in my website, the speed o meter is not displaying. It does not appear any error, just blank screen where the speed o meter code is used. Here is my code:
$(function () {
$('#containers').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: ''
},
pane: {
startAngle: -90,
endAngle: 90,
center: ['50%', '100%'],
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: 'Speed 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: [<?php echo join($result, ',') ?>],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
}
});
});
I don't know what is problem if any one knows please tell me.

The only thing i see is that you forgot a semi-colon:
<?php echo join($result, ',') ?>
Change to
<?php echo join($result, ','); ?>
Otherwise try the console-debugger for the javascript-part.