Angular Gauge With Two Axes

Our Angular Gauge chart can have any number of axes. They can start and end at any angle, with any value. Any number of arrows is supported, different arrow animation effects can be used.

by Anton

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/gauge.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>

CSS

#chartdiv {
	width	: 100%;
	height	: 500px;
}

JavaScript

var chart = AmCharts.makeChart( "chartdiv", {
  "theme": "light",
  "type": "gauge",
  "axes": [ {
    "axisColor": "green",
    "axisThickness": 3,
    "startValue": 60,
    "endValue": 120,
    "gridInside": false,
    "inside": false,
    "radius": "100%",
    "valueInterval": 60,
    "tickColor": "green",
    "startAngle": -30,
    "endAngle": 60
  }, {
    "axisColor": "#fdd400",
    "axisThickness": 3,
    "endValue": 160,
    "radius": "80%",
    "valueInterval": 20,
    "tickColor": "#fdd400"
  } ],
  "arrows": [ {
    "color": "#67b7dc",
    "innerRadius": "20%",
    "nailRadius": 0,
    "radius": "85%"
  } ],
  "export": {
    "enabled": true
  }
} );

randomValue();

// set random value
function randomValue() {
  var value = Math.round( Math.random() * 240 );
  chart.arrows[ 0 ].setValue( value );
}