Gauge with gradient fill
This demo shows how you can have a neat gradient-filled axis on a GaugeChart.
Open in:New tab
// Themes beginam4core.useTheme(am4themes_animated);am4core.useTheme(am4themes_dark);// Themes end
// create chartvar chart = am4core.create("chartdiv", am4charts.GaugeChart);chart.innerRadius = -15;
var axis = chart.xAxes.push(new am4charts.ValueAxis());axis.min = 0;axis.max = 1000000;axis.strictMinMax = true;axis.numberFormatter.numberFormat = "#a";
let ds = new am4core.DropShadowFilter();ds.blur = 10;ds.opacity = 0.5;axis.filters.push(ds);
var colorSet = new am4core.ColorSet();
var gradient = new am4core.LinearGradient();gradient.stops.push({ color: am4core.color("green") });gradient.stops.push({ color: am4core.color("yellow") });gradient.stops.push({ color: am4core.color("red") });
axis.renderer.line.stroke = gradient;axis.renderer.line.strokeWidth = 15;axis.renderer.line.strokeLinecap = "round";axis.renderer.line.strokeOpacity = 1;
axis.renderer.grid.template.disabled = true;
var hand = chart.hands.push(new am4charts.ClockHand());hand.radius = am4core.percent(102);hand.startWidth = 16;hand.pin.radius = 8;hand.parent.zIndex = 100;
setInterval(function () { hand.showValue(Math.random() * 1000000, 1000, am4core.ease.cubicOut);}, 2000);<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"; background-color: #222;}
#chartdiv { width: 100%; height: 500px;}gauge-with-gradient-fill