A VU meter is the same as an angular gauge but, instead of having a full circle-like shape, it's more like an arc. All the configuration options that we learned for the angular gauge chart apply to the VU meter as well.
In the following example, we will create a simple VU meter to plot the global emission of CO2 in the year 2012:
$( '#chart_container' ).highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: 'none'
},
title: {
text: 'Global CO<sub>2</sub> Emission in 2012 (in billion metric tons)',
useHTML: true
},
pane: {
startAngle: -45,
endAngle: 45,
background: {
backgroundColor: 'none',
borderColor: 'none'
},
size: 400,
center: ['50%', '60%']
},
tooltip: {
enabled: false
},
plotOptions: {
gauge: {
dial: {
radius: '95%'
}
}
},
yAxis: {
min: 0,
max: 16,
tickInterval: 2,
tickPosition: 'outside',
minorTickInterval: 0,
labels: {
distance: 20
},
plotBands: [{
from: 0,
to: 4,
color: '#3dbf24'
}, {
from: 4,
to: 12,
color: '#dc841c'
}, {
from: 12,
to: 16,
color: '#dc401c'
}]
},
series: [{
data: [12]
}]
});We turned off the default circle background of the angular gauge by setting pane.background.backgroundColor to none. This will remove the default gray gradient that appears behind the pane in a circular shape. The startAngle and endAngle properties have been set to -45 and 45 respectively to create an arc-like shape for the pane. The plotBands array in the yAxis component enhances visualization by adding color bands for various value ranges.
The following is a screenshot of the VU meter produced as a result of the preceding code: