YouTip

[Highcharts Gauge Chart](#) The following example demonstrates a solid gauge chart. 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 to 'solidgauge'. chart.type describes the chart type. The default value is "line". var chart = { type: 'solidgauge'}; ### pane Configuration The pane is only applicable to polar charts and angular gauges. This configurable object holds the general 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_guage_solid.htm $(document).ready(function() { var chart = { type: 'solidgauge' }; var title = null; var pane = { center: ['50%', '85%'], size: '140%', startAngle: -90, endAngle: 90, background: { backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE', innerRadius: '60%', outerRadius: '100%', shape: 'arc' } }; var tooltip = { enabled: false }; // the value axis var yAxis = { stops: [ [0.1, '#55BF3B'], // green [0.5, '#DDDF0D'], // yellow [0.9, '#DF5353'] // red ], lineWidth: 0, minorTickInterval: null, tickPixelInterval: 400, tickWidth: 0, title: { y: -70 }, labels: { y: 16 }, min: 0, max: 200, title: { text: 'Speed' } }; var plotOptions = { solidgauge: { dataLabels: { y: 5, borderWidth: 0, useHTML: true } } }; var credits = { enabled: false }; var series = [{ name: 'Speed', data: , dataLabels: { format: '' }, tooltip: { valueSuffix: ' km/h' } }]; var json = {}; json.chart = chart; json.title = title; json.pane = pane; json.tooltip = tooltip; json.yAxis = yAxis; json.credits = credits; json.series = series; $('#container-speed').highcharts(json); // the value axis yAxis = { stops: [ [0.1, '#55BF3B'], // green [0.5, '#DDDF0D'], // yellow [0.9, '#DF5353'] // red ], lineWidth: 0, minorTickInterval: null, tickPixelInterval: 400, tickWidth: 0, title: { y: -70 }, labels: { y: 16 }, min: 0, max: 5, title: { text: 'RPM' } }; series = [{ name: 'RPM', data: , dataLabels: { format: '' }, tooltip: { valueSuffix: ' revolutions/min' } }]; json.yAxis = yAxis; json.series = series; $('#container-rpm').highcharts(json); var chartFunction = function() { // Speed var chart = $('#container-speed').highcharts(); var point; var newVal; var inc; if (chart) { point = chart.series.points; inc = Math.round((Math.random() - 0.5) * 100); newVal = point.y + inc; if (newVal 200) { newVal = point.y - inc; } point.update(newVal); } // RPM chart = $('#container-rpm').highcharts(); if (chart) { point = chart.series.points; inc = Math.random() - 0.5; newVal = point.y + inc; if (newVal 5) { newVal = point.y - inc; } point.update(newVal); } }; // Bring life to the dials setInterval(chartFunction, 2000);}); The output of the above example is: [Highcharts Gauge Chart](#)