Customizing ClockHand
This demo shows how we can customize GaugeChart hand by pushing literally any element into it, e.g. Triangle to replace the tip an and SVG Image to replace pin.
Open in:New tab
/** * --------------------------------------- * 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 beginam4core.useTheme(am4themes_animated);// Themes end
// create chartvar chart = am4core.create("chartdiv", am4charts.GaugeChart);chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect
chart.innerRadius = -25;
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;
var 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);range0.axisFill.zIndex = -1;
var range1 = axis.axisRanges.create();range1.value = 50;range1.endValue = 80;range1.axisFill.fillOpacity = 1;range1.axisFill.fill = colorSet.getIndex(2);range1.axisFill.zIndex = -1;
var range2 = axis.axisRanges.create();range2.value = 80;range2.endValue = 100;range2.axisFill.fillOpacity = 1;range2.axisFill.fill = colorSet.getIndex(4);range2.axisFill.zIndex = -1;
var hand = chart.hands.push(new am4charts.ClockHand());
var tip = hand.createChild(am4core.Triangle);tip.width = 15;tip.height = 50;tip.rotation = -90;tip.direction = "bottom";tip.horizontalCenter = "middle";tip.x = am4core.percent(45);hand.fill = am4core.color("#999");hand.stroke = am4core.color("#666");
var pin = hand.createChild(am4core.Image);pin.href = "data:image/svg+xml;charset=utf-8;base64,PHN2ZyBoZWlnaHQ9IjI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUgMTBjMCAxLjYgMS4zNDMgMyAzIDNzMy0xLjQgMy0zSDV6IiBmaWxsPSIjZWNmMGYxIi8+PGcgZmlsbD0iIzk1YTVhNiI+PHBhdGggZD0iTTIzIDEuOTRsLTkgMyA2LjU5NSA3LjQ2M3pNMSAxLjk0bDkgMy02LjU5NSA3LjQ2M3oiLz48cGF0aCBkPSJNMjIgMTNhMTAgOSAwIDExLTIwIDAgMTAgOSAwIDExMjAgMHoiLz48L2c+PHBhdGggZD0iTTMgNGwxLjE1NiA1LjA2M0E3LjMwNSA3LjMwNSAwIDAwMyAxM2MwIDQuNDE4IDQuMDMgOCA5IDggNC45NzEgMCA5LTMuNTgyIDktOGE3LjMwMyA3LjMwMyAwIDAwLTEuMTU2LTMuOTM4TDIxIDRsLTUuMjE5IDEuNzVDMTQuNjI5IDUuMjc0IDEzLjM1NSA1IDEyIDVzLTIuNjI5LjI3NC0zLjc4MS43NUwzIDR6IiBmaWxsPSIjYmRjM2M3Ii8+PGcgZmlsbD0iIzdmOGM4ZCI+PHBhdGggZD0iTTExIDE0djJjMCAxLjEtLjg5NSAyLTIgMnMtMi0uOS0yLTJINmMwIDEuNiAxLjM0MyAzIDMgM3MzLTEuNCAzLTN2LTJoLTF6TTEzIDE0djJjMCAxLjEuODk1IDIgMiAyczItLjkgMi0yaDFjMCAxLjYtMS4zNDMgMy0zIDNzLTMtMS40LTMtM3YtMmgxeiIvPjxwYXRoIGQ9Ik0wIDExLjUzMXYuNzgxbDYgMi4zMTMtNi0uMDMxdi43MThsNi4wMzEuMDMyaC4wNjNMMCAxNy42ODh2Ljc4MUw5IDE1bC05LTMuNDY5ek0yNCAxMS41di44bC02IDIuM2g2di43SDE3LjkwNkwyNCAxNy42di44TDE1IDE1bDktMy41eiIvPjwvZz48cGF0aCBkPSJNOCA4Yy0xLjY1NyAwLTMgMS4zLTMgMyAwIDEuNiAxLjM0MyAzIDMgM3MzLTEuNCAzLTNjMC0xLjctMS4zNDMtMy0zLTN6IiBmaWxsPSIjZWNmMGYxIi8+PHBhdGggZD0iTTggOWMtMS4xMDUgMC0yIC45LTIgMnMuODk1IDIgMiAyIDItLjkgMi0yLS44OTUtMi0yLTJ6IiBmaWxsPSIjMmMzZTUwIi8+PHBhdGggZD0iTTggOWMtLjU1MiAwLTEgLjQtMSAxIDAgLjUuNDQ4IDEgMSAxczEtLjUgMS0xYzAtLjYtLjQ0OC0xLTEtMXpNMTYgOGMtMS42NTcgMC0zIDEuMy0zIDMgMCAxLjYgMS4zNDMgMyAzIDNzMy0xLjQgMy0zYzAtMS43LTEuMzQzLTMtMy0zeiIgZmlsbD0iI2VjZjBmMSIvPjxwYXRoIGQ9Ik0xNiA5Yy0xLjEwNSAwLTIgLjktMiAycy44OTUgMiAyIDIgMi0uOSAyLTItLjg5NS0yLTItMnoiIGZpbGw9IiMyYzNlNTAiLz48cGF0aCBkPSJNMTYgOWMtLjU1MiAwLTEgLjQtMSAxIDAgLjUuNDQ4IDEgMSAxczEtLjUgMS0xYzAtLjYtLjQ0OC0xLTEtMXoiIGZpbGw9IiNlY2YwZjEiLz48cGF0aCBkPSJNMTAuMjE5IDEzYy0uMjc2IDAtLjUuMi0uNS41IDAgLjEuMDM0LjIuMTI1LjMuMDQ1LjEuMDk2LjEuMTU2LjFsMS41MzEgMS42LjA5NC4xYy4wOTIuMS4yMjIuMi4zNzUuMnMuMjgzLS4xLjM3NS0uMmwuMDk0LS4xTDE0IDEzLjljLjA2IDAgLjExMSAwIC4xNTYtLjEuMDkxLS4xLjEyNS0uMi4xMjUtLjMgMC0uMy0uMjI0LS41LS41LS41aC0zLjU2MnoiIGZpbGw9IiMyYzNlNTAiLz48L3N2Zz4=";pin.horizontalCenter = "middle";pin.verticalCenter = "middle";pin.rotation = 90;
// using chart.setTimeout method as the timeout will be disposed together with a chartchart.setTimeout(randomValue, 2000);
function randomValue() { hand.showValue(Math.random() * 100, 1000, am4core.ease.cubicOut); chart.setTimeout(randomValue, 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";}
#chartdiv { width: 100%; height: 500px;}customizing-clockhand