How can I achieve this using highcarts? tired using stops:[...] but it will not work as above image.
yAxis: {
min: 0,
max: 100
},
series: [{
name: 'customers',
data: [{
color: {
//
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0},
stops: [
[0.1, '#009a60'],
[0.2, '#4aa84e'],
[0.3, '#92b73a'],
[0.4, '#c6bf22'],
[0.5, '#edbd02'],
[0.6, '#ffad00'],
[0.7, '#ff8c00'],
[0.8, '#fc6114'],
[0.9, '#f43021'],
[1.0, '#ed0022']
]
},
y:76
}],
dataLabels: {
format: '<div class="prc" style="text-align:center;"><span style="font-weight:normal; font-family:Helvetica Neue, Helvetica, Arial; font-size:52px;' +
'#333' + '">{y}</span>'
}
}]
One way of getting this char could be to use axis line and ticks to cover a chart to create white spaces. Next you could add more points and set stops with a color format that is not supported for a gradient - like hex color format with 3 digits ("#rgb").
Demo: http://jsfiddle.net/bsdtsmyb/
$(function() {
var rawData = 94,
data = getData(rawData);
function getData(rawData) {
var data = [],
start = Math.round(Math.floor(rawData / 10) * 10);
data.push(rawData);
for (i = start; i > 0; i -= 10) {
data.push({
y: i
});
}
return data;
}
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 10
},
title: {
text: ''
},
subtitle: {
text: rawData,
style: {
'font-size': '60px'
},
y: 200,
zIndex: 7
},
tooltip: {
enabled: false
},
pane: [{
startAngle: -120,
endAngle: 120,
background: [{ // Track for Move
outerRadius: '100%',
innerRadius: '80%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0,
shape: 'arc'
}],
size: '120%',
center: ['50%', '65%']
}, {
startAngle: -120,
endAngle: 120,
size: '95%',
center: ['50%', '65%'],
background: []
}],
yAxis: [{
min: 0,
max: 100,
lineWidth: 2,
lineColor: 'white',
tickInterval: 10,
labels: {
enabled: false
},
minorTickWidth: 0,
tickLength: 50,
tickWidth: 5,
tickColor: 'white',
zIndex: 6,
stops: [
[0, '#fff'],
[0.101, '#0f0'],
[0.201, '#2d0'],
[0.301, '#4b0'],
[0.401, '#690'],
[0.501, '#870'],
[0.601, '#a50'],
[0.701, '#c30'],
[0.801, '#e10'],
[0.901, '#f03'],
[1, '#f06']
]
}, {
linkedTo: 0,
pane: 1,
lineWidth: 5,
lineColor: 'white',
tickPositions: [],
zIndex: 6
}],
series: [{
animation: false,
dataLabels: {
enabled: false
},
borderWidth: 0,
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '80%',
data: data
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container" style="height: 300px;">
</div>
Even this is the old question, I hope the below demo will helpful for the new users:
Demo
Related
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
I try to display 3 vu-meters within a single call, but the vu-meters number 2 and 3 are one over the other.
Is there a way to display 3 vu-meters at once, or is the component locked?
You need to define additional pane, yAxis and series:
pane: [{
startAngle: -45,
endAngle: 45,
background: null,
center: ['20%', '145%'],
size: 300
}, {
startAngle: -45,
endAngle: 45,
background: null,
center: ['50%', '145%'],
size: 300
}, {
startAngle: -45,
endAngle: 45,
background: null,
center: ['80%', '145%'],
size: 300
}],
yAxis: [{
min: -20,
max: 6,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 6,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 0,
title: {
text: 'VU<br/><span style="font-size:8px">Channel A</span>',
y: -40
}
}, {
min: -20,
max: 6,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 6,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 1,
title: {
text: 'VU<br/><span style="font-size:8px">Channel B</span>',
y: -40
}
}, {
min: -20,
max: 6,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 6,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 2,
title: {
text: 'VU<br/><span style="font-size:8px">Channel B</span>',
y: -40
}
}],
series: [{
name: 'Channel A',
data: [-20],
yAxis: 0
}, {
name: 'Channel B',
data: [-20],
yAxis: 1
}, {
name: 'Channel C',
data: [-10],
yAxis: 2
}]
Live demo: https://jsfiddle.net/BlackLabel/43ft09mq/
API Reference: https://api.highcharts.com/highcharts/series.gauge
I am trying to create a custom data dial using high charts ( solid gauge ).
Please help me .
I am unable to generate an arrow end like tip dial of solid gauge. This is my current chart :
Updated Code : Please copy paste the code in the fiddle link provided below:
$(function() {
var gaugeOptions = {
chart: {
type: 'solidgauge',
height: 80,
width: 120,
backgroundColor: null
},
title: null,
pane: {
center: ['50%', '60%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
},
gauge: {
dial: {
baseWidth: 1,
topWidth: 1
},
pivot: {
radius: 3,
borderWidth: 1
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 5,
tickPositions: [],
plotBands: [{ // mark the weekend
color: {
linearGradient: [0, 0, 300, 0],
stops: [
[0.1, '#55BF3B'], // green
[0.2, '#DDDF0D'], // yellow
[0.3, '#DF5353']
]
},
from: 0,
to: 5,
innerRadius: '60%',
outerRadius: '100%',
}],
},
series: [{
name: 'Ship Average',
type: 'gauge',
data: [2],
color: {
linearGradient: [0, 0, 300, 0],
stops: [
[0.1, '#55BF3B'], // green
[0.25, '#DDDF0D'], // yellow
[0.4, '#DF5353']
]
},
dataLabels: {
format: '<span style="font-size:10px;color:grey;">{y} delays</span></div>',
y: 30,
borderWidth: 0
},
tooltip: {
valueSuffix: ' days'
}
}]
}));
});
http://jsfiddle.net/n9gfeor2/29/
Expected result :
You can realize it by wrapping dial method (translate) and edit path.
point.shapeArgs = {
d: dialOptions.path || [
'M', -rearLength, -baseWidth / 2,
'L',
baseLength, -baseWidth / 2,
radius, -topWidth / 2,
radius - 10, -topWidth / 2 - 10,
'M',
radius, -topWidth / 2,
'L',
radius - 10, -topWidth / 2 + 10,
'M',
radius, -topWidth / 2,
baseLength, baseWidth / 2, -rearLength, baseWidth / 2,
'z'
],
Simple demo:
http://jsfiddle.net/L488w1as/
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 try to disable tooltip for gauge but no matter what I do, it doesn't work.
I tried to place:
tooltip: {
enabled: false
}
under chart, pane, series ...
Here is a demo I use: Fiddle
and this is a code:
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
tooltip: {
enabled: false
}
},
exporting: {enabled: false},
title: {
text: 'meetings',
//align: 'bottom'
verticalAlign: 'bottom',
y: 10,
style: {
fontWeight: 'bold',
fontSize:'18px'
}
},
pane: {
tooltip: {
enabled: false
},
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: {
tooltip: {
enabled: false
},
min: 0,
max: max,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 0,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 0,
tickWidth: 0,
tickPosition: 'inside',
tickLength: 0,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: '',
y: 150,
style: {
fontWeight: 'bold',
fontSize:'18px'
}
},
plotBands: [{
from: 0,
to: color_threshold_values[0],
color: '#DA2626'
}, {
from: color_threshold_values[0],
to: color_threshold_values[1],
color: '#F19E26'
}, {
from: color_threshold_values[1],
to: color_threshold_max,
color: '#88A61F'
}]
},
series: [{
name: 'Count',
data: [data.count],
dataLabels: {
enabled:false,
borderColor: 'red',
borderWidth: 0,
padding: 5,
shadow: true,
style: {
fontWeight: 'bold',
fontSize:'25px'
}
},
}]
});
Any ideas?
Try adding it to the config object itslef?
http://jsfiddle.net/hesonazx/
$('#container').highcharts({
tooltip: {
enabled: false
},
chart: {
...
});
This is based on the documentation. Notice that the toottip property for a guage type chart doesn't have an enabled option. The general tooltip property does however.
You can just add .highcharts-tooltip{opacity: 0;}
See fiddle http://jsfiddle.net/DIRTY_SMITH/dpyy732d/2/