Gauge chart with custom ClockHand
This demo shows how we can customize a gauge chart’s hand by pushing any element into its children set. It uses a Triangle to replace the tip and an SVG Image to replace the pin.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
// Create root element// https://www.amcharts.com/docs/v5/getting-started/#Root_elementvar 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 }));
// Create axis and its renderer// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Axesvar axisRenderer = am5radar.AxisRendererCircular.new(root, { innerRadius: -10, strokeOpacity: 1, strokeWidth: 3});
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_handsvar axisDataItem = xAxis.makeDataItem({});axisDataItem.set("value", 0);
var hand = am5radar.ClockHand.new(root, { radius: am5.percent(99)});
// Add custom pin as imagehand.children.push( am5.Picture.new(root, { src: "data:image/svg+xml;charset=utf-8;base64,PHN2ZyBoZWlnaHQ9IjI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUgMTBjMCAxLjYgMS4zNDMgMyAzIDNzMy0xLjQgMy0zSDV6IiBmaWxsPSIjZWNmMGYxIi8+PGcgZmlsbD0iIzk1YTVhNiI+PHBhdGggZD0iTTIzIDEuOTRsLTkgMyA2LjU5NSA3LjQ2M3pNMSAxLjk0bDkgMy02LjU5NSA3LjQ2M3oiLz48cGF0aCBkPSJNMjIgMTNhMTAgOSAwIDExLTIwIDAgMTAgOSAwIDExMjAgMHoiLz48L2c+PHBhdGggZD0iTTMgNGwxLjE1NiA1LjA2M0E3LjMwNSA3LjMwNSAwIDAwMyAxM2MwIDQuNDE4IDQuMDMgOCA5IDggNC45NzEgMCA5LTMuNTgyIDktOGE3LjMwMyA3LjMwMyAwIDAwLTEuMTU2LTMuOTM4TDIxIDRsLTUuMjE5IDEuNzVDMTQuNjI5IDUuMjc0IDEzLjM1NSA1IDEyIDVzLTIuNjI5LjI3NC0zLjc4MS43NUwzIDR6IiBmaWxsPSIjYmRjM2M3Ii8+PGcgZmlsbD0iIzdmOGM4ZCI+PHBhdGggZD0iTTExIDE0djJjMCAxLjEtLjg5NSAyLTIgMnMtMi0uOS0yLTJINmMwIDEuNiAxLjM0MyAzIDMgM3MzLTEuNCAzLTN2LTJoLTF6TTEzIDE0djJjMCAxLjEuODk1IDIgMiAyczItLjkgMi0yaDFjMCAxLjYtMS4zNDMgMy0zIDNzLTMtMS40LTMtM3YtMmgxeiIvPjxwYXRoIGQ9Ik0wIDExLjUzMXYuNzgxbDYgMi4zMTMtNi0uMDMxdi43MThsNi4wMzEuMDMyaC4wNjNMMCAxNy42ODh2Ljc4MUw5IDE1bC05LTMuNDY5ek0yNCAxMS41di44bC02IDIuM2g2di43SDE3LjkwNkwyNCAxNy42di44TDE1IDE1bDktMy41eiIvPjwvZz48cGF0aCBkPSJNOCA4Yy0xLjY1NyAwLTMgMS4zLTMgMyAwIDEuNiAxLjM0MyAzIDMgM3MzLTEuNCAzLTNjMC0xLjctMS4zNDMtMy0zLTN6IiBmaWxsPSIjZWNmMGYxIi8+PHBhdGggZD0iTTggOWMtMS4xMDUgMC0yIC45LTIgMnMuODk1IDIgMiAyIDItLjkgMi0yLS44OTUtMi0yLTJ6IiBmaWxsPSIjMmMzZTUwIi8+PHBhdGggZD0iTTggOWMtLjU1MiAwLTEgLjQtMSAxIDAgLjUuNDQ4IDEgMSAxczEtLjUgMS0xYzAtLjYtLjQ0OC0xLTEtMXpNMTYgOGMtMS42NTcgMC0zIDEuMy0zIDMgMCAxLjYgMS4zNDMgMyAzIDNzMy0xLjQgMy0zYzAtMS43LTEuMzQzLTMtMy0zeiIgZmlsbD0iI2VjZjBmMSIvPjxwYXRoIGQ9Ik0xNiA5Yy0xLjEwNSAwLTIgLjktMiAycy44OTUgMiAyIDIgMi0uOSAyLTItLjg5NS0yLTItMnoiIGZpbGw9IiMyYzNlNTAiLz48cGF0aCBkPSJNMTYgOWMtLjU1MiAwLTEgLjQtMSAxIDAgLjUuNDQ4IDEgMSAxczEtLjUgMS0xYzAtLjYtLjQ0OC0xLTEtMXoiIGZpbGw9IiNlY2YwZjEiLz48cGF0aCBkPSJNMTAuMjE5IDEzYy0uMjc2IDAtLjUuMi0uNS41IDAgLjEuMDM0LjIuMTI1LjMuMDQ1LjEuMDk2LjEuMTU2LjFsMS41MzEgMS42LjA5NC4xYy4wOTIuMS4yMjIuMi4zNzUuMnMuMjgzLS4xLjM3NS0uMmwuMDk0LS4xTDE0IDEzLjljLjA2IDAgLjExMSAwIC4xNTYtLjEuMDkxLS4xLjEyNS0uMi4xMjUtLjMgMC0uMy0uMjI0LS41LS41LS41aC0zLjU2MnoiIGZpbGw9IiMyYzNlNTAiLz48L3N2Zz4=", centerX: am5.p50, centerY: am5.p50, rotation: 90, scale: 2 }));
// Use a Triangle element as a tip of the handvar tip = hand.children.push( am5.Triangle.new(root, { width: 15, height: 40, stroke: am5.color(0x333333), fill: am5.color(0x666666), rotation: 90, x: chart.getPrivate("radius", 0), centerY: am5.p0 }));
chart.onPrivate("radius", function (radius) { tip.set("x", radius);});
// Color handhand.hand.setAll({ stroke: am5.color(0x333333), fill: am5.color(0x666666)});
var bullet = axisDataItem.set( "bullet", am5xy.AxisBullet.new(root, { sprite: hand }));
xAxis.createAxisRange(axisDataItem);
axisDataItem.get("grid").set("visible", false);
setInterval(function () { axisDataItem.animate({ key: "value", to: Math.round(Math.random() * 100), duration: 800, easing: am5.ease.out(am5.ease.cubic) });}, 2000);
// Make stuff animate on loadchart.appear(1000, 100);<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: 95vh;}gauge-chart-with-custom-clockhand