YouTip

[Highcharts Gauge Chart](#) The following example demonstrates a VU Meter. We have already covered the basic configuration syntax of Highcharts in previous chapters. Next, let's look at other configurations. * * * ## Configuration ### chart.type Configuration Configure the chart's type as 'gauge'. The chart.type describes the chart type. The default value is "line". var chart = { type: 'gauge'}; ### pane Configuration The pane is only applicable to polar charts and angular gauges. This configurable object holds common options for combining the x-axis and y-axis. Each x-axis and y-axis can be associated with a pane through an index. var pane = { startAngle: -150, // The starting degree of the x-axis or gauge axis, given in degrees. 0 is North. endAngle: 150 // The final degree of the x-axis polar or angular axis, given in degrees. 0 is North.}; ### Example Filename: highcharts_vumeter.htm $(document).ready(function() { var 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 }; var credits = { enabled: false }; var title = { text: 'VU Meter' }; var pane = [{ startAngle: -45, endAngle: 45, background: null, center: ['25%', '145%'], size: 300 }, { startAngle: -45, endAngle: 45, background: null, center: ['75%', '145%'], size: 300 }]; var yAxis = [{ min: -20, max: 6, minorTickPosition: 'outside', tickPosition: 'outside', labels: { rotation: 'auto', distance: 20 }, plotBands: [{ from: 0, to: 6, color: '#C02316', innerRadius: '100%', outerRadius: '105%' }], pane: 0, title: { text: 'VU
Channel A', y: -40 } }, { min: -20, max: 6, minorTickPosition: 'outside', tickPosition: 'outside', labels: { rotation: 'auto', distance: 20 }, plotBands: [{ from: 0, to: 6, color: '#C02316', innerRadius: '100%', outerRadius: '105%' }], pane: 1, title: { text: 'VU
Channel B', y: -40 } }]; var plotOptions = { gauge: { dataLabels: { enabled: false }, dial: { radius: '100%' } } }; var series= [{ data: , yAxis: 0 }, { data: , yAxis: 1 }]; var json = {}; json.chart = chart; json.credits = credits; json.title = title; json.pane = pane; json.yAxis = yAxis; json.plotOptions = plotOptions; json.series = series; // Add some life var chartFunction = function (chart) { setInterval(function () { if (chart.series) { // the chart may be destroyed var left = chart.series.points, right = chart.series.points, leftVal, rightVal, inc = (Math.random() - 0.5) * 3; leftVal = left.y + inc; rightVal = leftVal + inc / 3; if (leftVal 6) { leftVal = left.y - inc; } if (rightVal 6) { rightVal = leftVal; } left.update(leftVal, false); right.update(rightVal, false); chart.redraw(); } }, 500); }; $('#container').highcharts(json, chartFunction); }); The output of the above example is: [Highcharts Gauge Chart](#)