Highcharts test tool
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: 400px; height: 300px; margin: 0 auto"></div>
JavaScript
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'operating Capacity %'
},
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%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#666'],
[1, '#0c0c0c']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
backgroundColor: '#DDD',
borderWidth: 1,
outerRadius: '105%',
innerRadius: '104%'
}]
},
plotOptions: {
gauge: {
dial: {
baseWidth: 4,
backgroundColor: '#C33',
borderColor: '#900',
borderWidth: 1,
rearLength: 20,
baseLength: 10,
...