Highcharts VU Meter Chart

In the previous chapters, we learned how to setup highcharts library and how to create a chart with required configurations using highcharts library in our webpage. Now, we will learn how to create a vu meter chart using highcharts library with examples.

Highcharts VU Meter Chart Example

Following is the example of creating a VU meter chart by setting the required chart properties using highcharts library.

<html>

<title>Highcharts VU Meter Chart</title>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/highcharts-more.js"></script>

<script src="https://code.highcharts.com/modules/exporting.js"></script>

<script type="text/javascript">

\$(function() {

Highcharts.chart('container', {

chart: {

type: 'gauge',

plotBorderWidth: 1,

plotBackgroundColor: {

linearGradient:  { x1: 0, y1: 0, x2: 0, y2: 1 },

stops: [[0, '#FFF4C6'], [0.3, '#FFFFFF'], [1, '#FFF4C6']]

},

plotBackgroundImage: null,

height: 200

},

title: {

text: 'VU meter'

},

pane: [{

startAngle: -45,

endAngle: 45,

background: null,

center: ['25%', '145%'],

size: 300

}, {

startAngle: -45,

endAngle: 45,

background: null,

center: ['75%', '145%'],

size: 300

}],

tooltip: {

enabled: false

},

yAxis: [{

min: -20,

max: 6,

minorTickPosition: 'outside',

tickPosition: 'outside',

labels: {

rotation: 'auto',

distance: 20

},

plotBands: [{

from: 0,

to: 6,

color: '#C02316',

}],

pane: 0,

title: {

text: 'VU<br/><span style="font-size:8px">Channel A</span>',

y: -40

}

}, {

min: -20,

max: 6,

minorTickPosition: 'outside',

tickPosition: 'outside',

labels: {

rotation: 'auto',

distance: 20

},

plotBands: [{

from: 0,

to: 6,

color: '#C02316',

}],

pane: 1,

title: {

text: 'VU<br/><span style="font-size:8px">Channel B</span>',

y: -40

}

}],

plotOptions: {

gauge: {

dataLabels: {

enabled: false

},

dial: {

}

}

},

series: [{

name: 'Channel A',

data: [-20],

yAxis: 0

}, {

name: 'Channel B',

data: [-20],

yAxis: 1

}]

},

// Let the music play

function(chart) {

setInterval(function() {

if (chart.series) { // the chart may be destroyed

var left = chart.series[0].points[0],

right = chart.series[1].points[0],

leftVal,

rightVal,

inc = (Math.random() - 0.5) * 3;

leftVal = left.y + inc;

rightVal = leftVal + inc / 3;

if (leftVal < -20 || leftVal > 6) {

leftVal = left.y - inc;

}

if (rightVal < -20 || rightVal > 6) {

rightVal = leftVal;

}

left.update(leftVal, false);

right.update(rightVal, false);

chart.redraw();

}

}, 500);

});

});

</script>

<body>

<div id="container"> </div>

</body>

</html>

If you observe the above example, we created a VU meter chart using highcharts library with required properties.

When we execute the above highcharts example, we will get the result like as shown below.

This is how we can create a VU meter chart using highcharts library with required properties.