Labels at the bottom of the GaugeChart axis
This demo will show how you can place the labels below both ends of the GaugeChart’s axis.
Open in:New tab
// Themes beginam4core.useTheme(am4themes_animated);// Themes end
// create chartvar chart = am4core.create("chartdiv", am4charts.GaugeChart);chart.innerRadius = am4core.percent(80);
// Normal axisvar axis = chart.xAxes.push(new am4charts.ValueAxis());axis.min = 0;axis.max = 100;axis.strictMinMax = true;axis.renderer.grid.template.disabled = true;
// Axis for rangesvar colorSet = new am4core.ColorSet();
var range0 = axis.axisRanges.create();range0.value = 0;range0.endValue = 50;range0.axisFill.fillOpacity = 1;range0.axisFill.fill = colorSet.getIndex(0);
var range1 = axis.axisRanges.create();range1.value = 50;range1.endValue = 100;range1.axisFill.fillOpacity = 1;range1.axisFill.fill = colorSet.getIndex(2);
// Main labelvar label = chart.radarContainer.createChild(am4core.Label);label.isMeasured = false;label.fontSize = 45;label.x = am4core.percent(50);label.y = am4core.percent(100);label.horizontalCenter = "middle";label.verticalCenter = "bottom";label.text = "50%";
// Handvar hand = chart.hands.push(new am4charts.ClockHand());hand.axis = axis;hand.innerRadius = am4core.percent(20);hand.startWidth = 10;hand.pin.disabled = true;hand.value = 50;
hand.events.on("propertychanged", function (ev) { range0.endValue = ev.target.value; range1.value = ev.target.value; axis.invalidate();});
setInterval(function () { var value = Math.round(Math.random() * 100); label.text = value + "%"; var animation = new am4core.Animation( hand, { property: "value", to: value }, 1000, am4core.ease.cubicOut ).start();}, 2000);
// Axis labelsvar label0 = chart.radarContainer.createChild(am4core.Label);label0.isMeasured = false;label0.y = 10;label0.horizontalCenter = "middle";label0.verticalCenter = "top";label0.text = "Very good";
label0.adapter.add("x", function (x, target) { return -( axis.renderer.pixelInnerRadius + (axis.renderer.pixelRadius - axis.renderer.pixelInnerRadius) / 2 );});
var label1 = chart.radarContainer.createChild(am4core.Label);label1.isMeasured = false;label1.y = 10;label1.horizontalCenter = "middle";label1.verticalCenter = "top";label1.text = "Unacceptable";
label1.adapter.add("x", function (x, target) { return ( axis.renderer.pixelInnerRadius + (axis.renderer.pixelRadius - axis.renderer.pixelInnerRadius) / 2 );});<div id="chartdiv"></div>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;}labels-at-the-bottom-of-the-gaugechart-axis