<!-- Styles --><style>#chartdiv {
width: 100%;
height: 500px;
}
</style><!-- Resources --><scriptsrc="https://cdn.amcharts.com/lib/4/core.js"></script><scriptsrc="https://cdn.amcharts.com/lib/4/charts.js"></script><scriptsrc="https://cdn.amcharts.com/lib/4/themes/animated.js"></script><!-- Chart code --><script>
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// 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 = 100;
axis.strictMinMax = true;
var colorSet = new am4core.ColorSet();
var gradient = new am4core.LinearGradient();
gradient.stops.push({color:am4core.color("red")})
gradient.stops.push({color:am4core.color("yellow")})
gradient.stops.push({color:am4core.color("green")})
axis.renderer.line.stroke = gradient;
axis.renderer.line.strokeWidth = 15;
axis.renderer.line.strokeOpacity = 1;
axis.renderer.grid.template.disabled = true;
var hand = chart.hands.push(new am4charts.ClockHand());
hand.radius = am4core.percent(97);
setInterval(function() {
hand.showValue(Math.random() * 100, 1000, am4core.ease.cubicOut);
}, 2000);
}); // end am4core.ready()</script><!-- HTML --><divid="chartdiv"></div>
/* Imports */import * as am4core from"@amcharts/amcharts4/core";
import * as am4charts from"@amcharts/amcharts4/charts";
import am4themes_animated from"@amcharts/amcharts4/themes/animated";
/* Chart code */// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end// create chartlet chart = am4core.create("chartdiv", am4charts.GaugeChart);
chart.innerRadius = -15;
let axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 100;
axis.strictMinMax = true;
let colorSet = new am4core.ColorSet();
let gradient = new am4core.LinearGradient();
gradient.stops.push({color:am4core.color("red")})
gradient.stops.push({color:am4core.color("yellow")})
gradient.stops.push({color:am4core.color("green")})
axis.renderer.line.stroke = gradient;
axis.renderer.line.strokeWidth = 15;
axis.renderer.line.strokeOpacity = 1;
axis.renderer.grid.template.disabled = true;
let hand = chart.hands.push(new am4charts.ClockHand());
hand.radius = am4core.percent(97);
setInterval(function() {
hand.showValue(Math.random() * 100, 1000, am4core.ease.cubicOut);
}, 2000);
We use cookies on our website to support technical features that enhance your user experience. We also collect anonymous analytical data, as described in our Privacy policy.
Attention, please!
We use cookies for essential website functionality, analytics, and ad performance measurement as per our Privacy Policy.