YouTip

[Highcharts Gauge](#) The following example demonstrates a dual-axis speedometer. We have already learned 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'. 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 general options for combining the x-axis and y-axis. Each x-axis and y-axis can be associated with a pane via 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 coordinate or angular axis, given in degrees. 0 is North.}; ### Example Filename: highcharts_guage_dualaxes.htm $(document).ready(function() { var chart = { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false }; var credits = { enabled: false }; var title = { text: 'Dual-Axis Speedometer' }; var pane = { startAngle: -150, endAngle: 150 }; // the value axis var yAxis = [{ min: 0, max: 200, lineColor: '#339', tickColor: '#339', minorTickColor: '#339', offset: -25, lineWidth: 2, labels: { distance: -20, rotation: 'auto' }, tickLength: 5, minorTickLength: 5, endOnTick: false }, { min: 0, max: 124, tickPosition: 'outside', lineColor: '#933', lineWidth: 2, minorTickPosition: 'outside', tickColor: '#933', minorTickColor: '#933', tickLength: 5, minorTickLength: 5, labels: { distance: 12, rotation: 'auto' }, offset: -20, endOnTick: false }]; var series= [{ name: 'Speed', data: , dataLabels: { formatter: function () { var kmh = this.y, mph = Math.round(kmh * 0.621); return '' + kmh + ' km/h
' + '' + mph + ' mph'; }, backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#DDD'], [1, '#FFF'] ] } }, tooltip: { valueSuffix: ' km/h' } }]; var json = {}; json.chart = chart; json.credits = credits; json.title = title; json.pane = pane; json.yAxis = yAxis; json.series = series; // Add some life var chartFunction = function (chart) { setInterval(function () { var point = chart.series.points, newVal, inc = Math.round((Math.random() - 0.5) * 20); newVal = point.y + inc; if (newVal 200) { newVal = point.y - inc; } point.update(newVal); }, 3000); }; $('#container').highcharts(json, chartFunction); }); The output of the above example is: [Highcharts Gauge](#)