Animated Gauge
Gauge charts are most useful for displaying live data. This demo shows such a chart in action.
Key implementation details
The colored bands on the circular axis are created using the axis range feature. The “clock hand” is configured to have a large “pin” in the center and a thin “hand”. Then we just animate all of these in unison when data changes.
Related tutorials
Demo source
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/radar.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/radar-chart/
var chart = root.container.children.push(
am5radar.RadarChart.new(root, {
panX: false,
panY: false,
startAngle: 180,
endAngle: 360
})
);
chart.getNumberFormatter().set("numberFormat", "#'%'");
// Create axis and its renderer
// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Axes
var axisRenderer = am5radar.AxisRendererCircular.new(root, {
innerRadius: -40
});
axisRenderer.grid.template.setAll({
stroke: root.interfaceColors.get("background"),
visible: true,
strokeOpacity: 0.8
});
var xAxis = chart.xAxes.push(
am5xy.ValueAxis.new(root, {
maxDeviation: 0,
min: 0,
max: 100,
strictMinMax: true,
renderer: axisRenderer
})
);
// Add clock hand
// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Clock_hands
var axisDataItem = xAxis.makeDataItem({});
var clockHand = am5radar.ClockHand.new(root, {
pinRadius: 50,
radius: am5.percent(100),
innerRadius: 50,
bottomWidth: 0,
topWidth: 0
});
clockHand.pin.setAll({
fillOpacity: 0,
strokeOpacity: 0.5,
stroke: am5.color(0x000000),
strokeWidth: 1,
strokeDasharray: [2, 2]
});
clockHand.hand.setAll({
fillOpacity: 0,
strokeOpacity: 0.5,
stroke: am5.color(0x000000),
strokeWidth: 0.5
});
var bullet = axisDataItem.set(
"bullet",
am5xy.AxisBullet.new(root, {
sprite: clockHand
})
);
xAxis.createAxisRange(axisDataItem);
var label = chart.radarContainer.children.push(
am5.Label.new(root, {
centerX: am5.percent(50),
textAlign: "center",
centerY: am5.percent(50),
fontSize: "1.5em"
})
);
axisDataItem.set("value", 50);
bullet.get("sprite").on("rotation", function () {
var value = axisDataItem.get("value");
label.set("text", Math.round(value).toString() + "%");
});
setInterval(function () {
var value = Math.round(Math.random() * 100);
axisDataItem.animate({
key: "value",
to: value,
duration: 500,
easing: am5.ease.out(am5.ease.cubic)
});
axisRange0.animate({
key: "endValue",
to: value,
duration: 500,
easing: am5.ease.out(am5.ease.cubic)
});
axisRange1.animate({
key: "value",
to: value,
duration: 500,
easing: am5.ease.out(am5.ease.cubic)
});
}, 2000);
chart.bulletsContainer.set("mask", undefined);
var colorSet = am5.ColorSet.new(root, {});
var axisRange0 = xAxis.createAxisRange(
xAxis.makeDataItem({
above: true,
value: 0,
endValue: 50
})
);
axisRange0.get("axisFill").setAll({
visible: true,
fill: colorSet.getIndex(0)
});
axisRange0.get("label").setAll({
forceHidden: true
});
var axisRange1 = xAxis.createAxisRange(
xAxis.makeDataItem({
above: true,
value: 50,
endValue: 100
})
);
axisRange1.get("axisFill").setAll({
visible: true,
fill: colorSet.getIndex(4)
});
axisRange1.get("label").setAll({
forceHidden: true
});
// Make stuff animate on load
chart.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>