$(function () {
var merge = Highcharts.merge;
var perShapeGradient = {
x1: 0,
y1: 1,
x2: 1,
y2: 1
};
var vcolors = Highcharts.getOptions().colors;
vcolors = [
{
linearGradient: merge(perShapeGradient),
stops: [
[0, 'rgb(248,255,232)'],
[1, 'rgb(41,154,11)']
],
},
{
linearGradient: merge(perShapeGradient),
stops: [
[0, 'rgb(248,80,50)'],
[1, 'rgb(241,111,92)']
],
},
{
linearGradient: merge(perShapeGradient),
stops: [
[0, 'rgb(249,198,103)'],
[1, 'rgb(221,164,17)']
],
},
{
linearGradient: merge(perShapeGradient),
stops: [
[0, 'rgb(157,213,58)'],
[1, 'rgb(161,213,79)']
],
}
];
$('#container-speed').highcharts({
chart: {
type: 'solidgauge',
backgroundColor: null,
enableMouseTracking:true,
borderWidth: 1,
plotBorderWidth: 0,
marginBottom: 100,
}, legend: {
enabled: true,
align: 'right',
},
title: 'asdasdadasdasdasdasdasdas',
pane: {
center: ['50%', '85%'],
/* size: '100%',*/
startAngle: -90,
endAngle: 90,
background: {
/*backgroundColor: 'rgba(10,10,10, 0.7)',*/
backgroundColor:'black',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
},
},
tooltip: {
enabled: true
},
// the value axis
yAxis: {
min: 0,
max: 300,
title: {
text: 'Speedeees1111',
y:-150
}, style: {
color: '#FF6699',
fontWeight: 'bold',
fontSize:'15px'
},
/* backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
},*/
},
credits: {
enabled: false
},
series: [{
name: 'Anterior',
data: [{
y:95,
color:vcolors[2],
}],
/*data: [180],*/
dataLabels: {
y: -13,
x:-40,
enabled:true,
backgroundColor:null,
color:'#000',
crop:false,
style: {
color: '#FF6699',
fontWeight: 'bold',
fontSize:'15px'
}
}
},{
name: 'Actual',
data: [{y:120,
color: 'rgba(255,116, 0, 0.25)'
}
],
dataLabels: {
y: -13,
x:40,
enabled:true,
backgroundColor:'green',
color: 'yellow',
crop:false,
style: {
fontWeight: 'bold',
fontSize:'15px'
}
}, plotOptions: {
series: {
enableMouseTracking: true
}
}
}],
});
});
<script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-more.js"></script> <script src="http://code.highcharts.com/modules/solid-gauge.js"></script> <div style="width: 600px; height: 400px; margin: 0 auto"> <div id="container-speed" style=""></div> <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div> </div>