I've been trying to make the gauge thinner. I succeeded a little by making the innerRadius 90%, but I'm unable to change the size of the green section. It's always bigger. I tried playing around with 'outerRadius' too but lo luck so far.
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['30%', '85%'],
size: '150%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '110%',
outerRadius: '85%',
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,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: ''
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [20],
dataLabels: {
format: '<div style="text-align:center">' +
'<span style="font-size:25px">{y}</span><br/>' +
'<span style="font-size:12px;opacity:0.4">km/h</span>' +
'</div>'
}
}]
}));
Here's a fiddle. I'm basically trying to make the green match the grey.
The size of the green section can be set by add properties radius and innerRadius in series.data.
In your case, it should be:
series: [{
name: 'Speed',
data: [{
y: 20,
radius: 90,
innerRadius: 105
}],
dataLabels: {...}
}]
more info here
You can also set radius and innerRadius properties on a series level:
series: [{
radius: 90,
innerRadius: 105,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/fwumc7db/
API Reference:
https://api.highcharts.com/highcharts/series.solidgauge.innerRadius
https://api.highcharts.com/highcharts/series.solidgauge.radius
Related
The yAxis values min and max are set to 0 and 100 with a tick interval of 20 by me.
But when the resolution is changed to a lower resolution or the chart is zoomed in,
I have observed that the height of the high hart decreases and the max value is set to 120 and tick interval to 40 on its own
Which is not the desired behavior can you please help me out how to avoid it?
How can i make sure the max is 100 with a tickinterval 20 in all chart heights and also in turn in lower resolution.
Thanks in advance
Note:- I believe the height is decreased because the xAxis labels rotate diagonally as the width is decreased (in lower resolution) and that occupies more space in the HTML div and causes the height of the chart to decrease.
YAxis with expected behaviour
YAxis in lower resolution with decreased height
https://jsfiddle.net/BlackLabel/drgkt598/
Highcharts.chart('container', {
chart: {
type: "column",
height: 205,
plotBackgroundColor: "#D3D3D3",
width: 250,
},
title: {
text: ''
},
credits: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: false
},
pointPadding: 0
}
},
xAxis: {
lineWidth: 2,
type: 'category',
lineColor: '#000',
tickLength: 0
},
yAxis: [{
title: {
text: ''
},
min: 0,
max: 100,
tickInterval: 10,
gridLineWidth: 0,
plotLines: [{
value: 70,
color: 'black',
dashStyle: "Solid",
width: 4,
zIndex: 5,
label: {
text: 39,
align: "right",
x: 2,
y: -5,
style: {
color: 'black',
fontWeight: "bold",
fontSize: "18px",
}
}
}],
}, {
linkedTo: 0,
width: 60,
labels: {
enabled: false
},
plotBands: [{
color: 'rgb(204,0,0)',
from: 0,
to: 30.99,
zIndex: 1,
},
{
color: 'rgb(226,113,113)',
from: 31,
to: 44.99,
zIndex: 3,
},
{
color: 'rgb(247,209,34)',
from: 45,
to: 54.99,
zIndex: 3,
},
{
color: 'rgb(136,207,136)',
from: 55,
to: 68.99,
zIndex: 3,
},
{
color: 'rgb(68,180,68)',
from: 69,
to: 87.99,
zIndex: 3,
},
{
color: 'rgb(0,153,0)',
from: 88,
to: 100,
zIndex: 3,
}
]
}],
series: [{
dataLabels: {
color: "white",
verticalAlign: "bottom",
crop: false,
style: {
fontWeight: "Normal"
}
},
data: [{
y: 85,
name: 'A',
color: 'red',
dataLabels: {
formatter() {
return '<span style="font-size:11px;">A</span>';
},
y: -20
}
}, {
y: 72,
name: 'B',
color: 'green',
dataLabels: {
formatter() {
return '<span style="font-size:11px;">B</span>';
},
y: -15
}
}, {
y: 83,
name: 'C',
color: 'blue',
dataLabels: {
formatter() {
return '<span style="font-size:11px;">C</span>';
},
y: -15
}
}],
showInLegend: false
}]
});
Just like you have noted - there is not enough space to render 5 labels for some smaller dimensions, so implemented logic tries to calculate other timestamps, which will fit, like [0, 40, 80, 120].
I think that you can control it by using the responsive options and set the tickInterval to another value like 50.
Demo: https://jsfiddle.net/BlackLabel/zupbe174/
responsive: {
rules: [{
condition: {
maxHeight: 120
},
chartOptions: {
yAxis: [{
tickInterval: 50
}, {
}]
}
}]
}
API: https://api.highcharts.com/highcharts/responsive.rules.condition
I'm using High charts gauge-solid. So I need to create below like chart.
Can you tell me how to give different data sets for this chart (each and every color has its own data)?
What I need is this:
This is what I have tried: jsfiddle
$(function () {
$('#gauge').highcharts({
chart: {
type: 'solidgauge',
backgroundColor: 'transparent'
},
title: null,
pane: {
center: ['50%', '70%'],
size: '130%',
startAngle: -120,
endAngle: 120,
background: {
backgroundColor: '#fff',
innerRadius: '75%',
outerRadius: '100%',
shape: 'arc',
borderColor: 'transparent'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
min: 0,
max: 100,
stops: [
[0.1, '#e74c3c'], // red
[0.5, '#f1c40f'], // yellow
[0.9, '#2ecc71'] // green
],
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
gridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
title: {
enabled: false
}
},
credits: {
enabled: false
},
plotOptions: {
solidgauge: {
innerRadius: '75%',
dataLabels: {
y: -45,
borderWidth: 0,
useHTML: true
}
}
},
series: [{
data: [83],
dataLabels: {
format: '<p style="text-align:center;">{y}%</p>'
}
}]
});
});
data array can contain more than one value for a series:
series: [{
data: [80, 150, 200]
}]
Live demo: http://jsfiddle.net/kkulig/tou6wwxj/
If you want every dial to move only within its own range then you can simply make sure that a proper value is assigned to a point while initializing or updating it.
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
I have the following issue with highcharts SolidGauge.
Please find some context - SolidGauge is to be displayed for each comment that I call from MySql. Each comment brings in to PHP variable [$myvalue] a proprietary value per comment ID - [$myvalue] called outside of the Chart code, in the same file, works perfectly fine and shows distributed values correctly for each comment.
Issue - [$myvalue] shows duplicate value for each chart displayed in the UI - mor exactly the last comment value which is [8] - so all the Charts are showing value [8]. Please help :) I've tried everything (from unset, destroy etc)
$(function () {
$(document).ready(function () {
// The speed gauge
$('.container-speed').each(function() {
var chart = new Highcharts.Chart({
chart: {
type: 'solidgauge',
backgroundColor:'rgba(255, 255, 255, 0.1)',
renderTo: this
},
pane: {
center: ['50%', '50%'],
size: '65%',
startAngle: 0,
endAngle: 360,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#f5f5f5',
innerRadius: '90%',
outerRadius: '80%',
shape: 'circle'
}
},
tooltip: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -15,
borderWidth: 0,
useHTML: true
}
}
},
title: null,
yAxis: {
min: 0,
max: 8,
stops: [
[0.99, '#55BF3B'], // green
[1.1, '#DDDF0D'], // yellow
[1.2, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 100,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 90,
x: 30
}
},
credits: {
enabled: false
},
series: [{
data: [<?php echo $myvalue; ?>],
dataLabels: {
format: '<div style="text-align:center;"><span style="font-size:14px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'gray') + '"><?php echo $myvalue; ?></span></div>'
}}] }) })
})
});
you should iterate over values, while invoking
$('.container-speed').each(function() //pass value in this function
pass value in this function and then call it in datalabels.
$( document ).ready(function() {
var gaugeOptions = {
chart: {
type: 'solidgauge',
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
title: null,
pane: {
center: ['50%', '50%'],
size: '55%',
startAngle: 0,
endAngle: 270,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#f5f5f5',
innerRadius: '90%',
outerRadius: '90%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[1.0, '#55BF3B'], // green
[1.1, '#DDDF0D'], // yellow
[1.3, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 45,
tickWidth: 1,
title: {
y: -70
},
labels: {
y: 90,
x: 30
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -15,
borderWidth: 0,
useHTML: true
}
}
}
};
// My Container
$('#container_myContainer_<? echo $comment->comment_ID ?>').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 8
},
credits: {
enabled: false
},
series: [{
data: [<? echo get_comment_meta( $comment->comment_ID, 'myValue', true )?>],
dataLabels: {
format: '<div style="text-align:center;"><span style="font-size:14px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'gray') + '"><? echo get_comment_meta( $comment->comment_ID, 'myValue', true )?></span></div>'
}
}]
}))
})
Is there any simple example (preferibly with a JSFiddle) for an implementation of a full circle gauge with Highcharts like the one below from jQuery knob ?
Here is what I ve got so far : http://jsfiddle.net/skeletorkun/grn5o39e/1/
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '50%'],
size: '100%',
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: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The RPM gauge
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'sth'
}
},
series: [{
name: 'RPM',
data: [92],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>'
},
tooltip: {
valueSuffix: ' revolutions/min'
}
}]
}));
});
You can realise that by solid-gauge and set a correct angles in pane.
pane: {
center: ['50%', '50%'],
size: '100%',
startAngle: 0,
endAngle: 360,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
Example: http://jsfiddle.net/e76o9otk/1/
Is jQuery roundSlider suitable for you ?
This was made with div elements only, so very easy to customize and flexible to use.
For more details check the demos page.
Demo on jsFiddle same as your requirement