Angular Gauge

Anglular Gauges (also known as Speedometer Chart) are most commonly used to mimic the real-life gauges to display values like volume, temperature, speed, etc.

by Rogério Saraceni

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

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

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// create chart
var chart = am4core.create("chartdiv", am4charts.GaugeChart);
chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect

//chart.innerRadius = 180;
chart.innerRadius = am4core.percent(150);

var axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 100;
axis.strictMinMax = true;
axis.renderer.grid.template.stroke = new am4core.InterfaceColorSet().getFor("background");
axis.renderer.grid.template.strokeOpacity = 0.3;
axis.renderer.grid.template.disabled = true;
axis.renderer.labels.template.disabled = true;

var colorSet = new am4core.ColorSet();

var range0 = axis.axisRanges.create();
range0.value = 0;
range0.endValue = 10;
range0.axisFill.fillOpacity = 1;
range0.axisFill.fill = am4core.color("#C60202");
range0.axisFill.zIndex = - 1;

var range1 = axis.axisRanges.create();
range1.value = 10;
range1.endValue = 20;
range1.axisFill.fillOpacity = 1;
range1.axisFill.fill = am4core.color("#C63102");
range1.axisFill.zIndex = -1;

var range2 = axis.axisRanges.create();
range2.value = 20;
range2.endValue = 30;
range2.axisFill.fillOpacity = 1;
range2.axisFill.fill = am4core.color("#C65F02");
range2.axisFill.zIndex = -1;

var range3 = axis.axisRanges.create();
range3.value = 30;
range3.endValue = 40;
range3.axisFill.fillOpacity = 1;
range3.axisFill.fill = am4core.color("#C68E02");
range3.axisFill.zIndex = - 1;

var range4 = axis.axisRanges.create();
range4.value = 40;
range4.endValue = 50;
range4.axisFill.fillOpacity = 1;
range4.axisFill.fill = am4core.color("#C6BD02");
range4.axisFill.zIndex = -1;

var range5 = axis.axisRanges.create();
range5.value = 50;
range5.endValue =...