Javascript examples for highcharts:Gauge Chart
angular gauge: multiple dials with different colors
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> <style id="compiled-css" type="text/css"> body {// w w w. ja v a 2 s.co m background: lightblue; } </style> <script type="text/javascript"> $(window).load(function(){ $(function () { $('#gauge').highcharts({ chart: { type: 'solidgauge', backgroundColor: '#fff' }, title: null, pane: { center: ['50%', '80%'], size: '130%', startAngle: -90, endAngle: 90, background: { backgroundColor: '#FFF', innerRadius: '90%', outerRadius: '105%', shape: 'arc', borderColor: '#fff' } }, tooltip: { enabled: false }, // the value axis yAxis: { min: 0, max: 100, stops: [ [0.1, '#e74c3c'], // red [0.5, '#f1c40f'], // yellow [0.9, '#2ecc71'] // green ], minorTickInterval: null, tickPixelInterval: 400, tickWidth: 0, gridLineWidth: 0, gridLineColor: 'transparent', labels: { enabled: false } }, series: [{ data: [83], innerRadius:'120%', radius: '110%' }, { data: [50], innerRadius:'110%', radius: '100%' }, { data: [19 ], innerRadius:'90%', radius: '80%' }] }); }); }); </script> </head> <body> <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/solid-gauge.src.js"></script> <div id="gauge" style="height:242px;"></div> </body> </html>