Highcharts Solid Gauge
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/solid-gauge.src.js"></script>
<div id="container" style="width: 100px; height: 100px;"></div>
CSS
#container {
min-width: 100px;
max-width: 100px;
/*height: 300px;*/
margin: 1em auto;
}
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'solidgauge',
plotBorderWidth: 0,
marginRight: 0,
marginLeft: 0,
marginTop: 0,
marginBottom: 0
},
tooltip: {
enabled: false
},
title: {
text: ''
},
credits: {
enabled: false
},
pane: {
size: '99%',
startAngle: 0,
endAngle: 360,
background: {
outerRadius: '101%',
backgroundColor: '#ffffff'
}
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
}
}
},
yAxis: {
labels: {
enabled: false
},
min: 0,
max: 100,
lineColor: '#E6E6E6',
minorTickLength: 0,
tickLength: 0,
tickWidth: 1
},
series: [
{
innerRadius: '101',
data: [{y:67,color:'#10355B'}],
radius: '95%'
},
{
innerRadius: '101',
data: [{y:67,color:'#10355B'}],
radius: '95%'
},
]
});
});