highcharts vu meter
HTML
<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/exporting.js"></script>
<div id="container" style="width: 200px; height: 60px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBorderWidth: 0,
plotBackgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#FFFFFF'],
[0.3, '#FFFFFF'],
[1, '#FFFFFF']
]
},
plotBackgroundImage: null,
height: 100
},
title: {
text: null
},
pane: [{
startAngle: -0,
endAngle: 0,
background: null,
center: ['25%', '145%'],
size: 0
}, {
startAngle: -90,
endAngle: 90,
background: null,
center: ['40%', '70%'],
size: 90
}],
yAxis: [{
}, {
min: 0,
max: 100,
minorTickPosition: 'outside',
minorTickWidth: '0',
tickPosition: 'outside',
labels: {
rotation: '180',
enabled: "false",
distance: 6
},
plotBands: [{
from: 0,
to: 40,
color: '#fbac6b',
innerRadius: '120%',
outerRadius: '100%'
}, {
from: 40,
to: 80,
color: '#81ad83',
innerRadius: '120%',
outerRadius: '100%'
}, {
from: 80,
to: 100,
color: '#55c55a',
innerRadius: '120%',
outerRadius: '100%'
}],
pane: 1,
title: {
text: '',
y: 40
}
}],
plotOptions: {
gauge: {
dataLabels:...