Gauge with circular auto-truncated labels
This demo shows how we can use an adapter to automatically truncate circular labels on a gauge chart.
/** * --------------------------------------- * 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 and chartvar 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, { startAngle: -180, endAngle: 0 }));
// Create axis and its renderer// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Axesvar axisRenderer = am5radar.AxisRendererCircular.new(root, { innerRadius: -30});
axisRenderer.grid.template.setAll({ forceHidden: true});
axisRenderer.ticks.template.setAll({ visible: true, strokeOpacity: 1});
var xAxis = chart.xAxes.push( am5xy.ValueAxis.new(root, { min: 0, max: 100, textType: "radial", strictMinMax: true, renderer: axisRenderer }));
// Responsive font sizeaxisRenderer.labels.template.onPrivate("radius", function (size) { var radius = axisRenderer.getPrivate("radius"); var fontSize = Math.min(20, radius / 10); axisRenderer.labels.template.set("fontSize", fontSize);});
// Add clock hand// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Clock_handsvar axisDataItem = xAxis.makeDataItem({});
var clockHand = am5radar.ClockHand.new(root, { pinRadius: am5.percent(7), radius: am5.percent(80), bottomWidth: 20});
var bullet = axisDataItem.set( "bullet", am5xy.AxisBullet.new(root, { sprite: clockHand }));
xAxis.createAxisRange(axisDataItem);
var label = chart.radarContainer.children.push( am5.Label.new(root, { fill: am5.color(0x000000), centerX: am5.percent(50), textAlign: "center", centerY: am5.percent(50), fontSize: "2em" }));
axisDataItem.set("value", 2);
bullet.get("sprite").on("rotation", function () { var value = axisDataItem.get("value"); var text = Math.round(axisDataItem.get("value")).toString(); var fill = am5.color(0x000000); xAxis.axisRanges.each(function (axisRange) { if (value > axisRange.get("value") && value <= axisRange.get("endValue")) { fill = axisRange.get("axisFill").get("fill"); } }); clockHand.pin.animate({ key: "fill", to: fill, duration: 500, easing: am5.ease.out(am5.ease.cubic) });
clockHand.hand.animate({ key: "fill", to: fill, duration: 500, easing: am5.ease.out(am5.ease.cubic) });});setInterval(function () { axisDataItem.animate({ key: "value", to: Math.random() * 90 - 1, duration: 500, easing: am5.ease.out(am5.ease.cubic) });}, 5000);
chart.bulletsContainer.set("mask", undefined);
// Create axis ranges bands// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Bandsvar bandsData = [ { title: "Safe", color: am5.color(0x4281a4), from: 0, to: 10 }, { title: "Low risk", color: am5.color(0x9cafb7), from: 10, to: 20 }, { title: "Medium risk", color: am5.color(0xead2ac), from: 20, to: 40 }, { title: "High risk", color: am5.color(0xe6b89c), from: 40, to: 70 }, { title: "Danger", color: am5.color(0xfe938c), from: 70, to: 100 }];
// Create tooltip for bandsvar tooltip = am5.Tooltip.new(root, { getFillFromSprite: false, autoTextColor: false});
tooltip.get("background").set("fill", am5.color(0x000000));tooltip.label.set("fill", am5.color(0xffffff));
am5.array.each(bandsData, function (data) { var axisRange = xAxis.createAxisRange(xAxis.makeDataItem({})); var tick = axisRange.get("tick"); if (tick) { tick.set("visible", false); }
axisRange.setAll({ value: data.from, endValue: data.to });
axisRange.get("axisFill").setAll({ visible: true, fill: data.color, tooltipText: data.title, fillOpacity: 30, tooltip: tooltip });
axisRange.get("label").setAll({ text: data.title, inside: true, tooltipPosition: "pointer", forceInactive: true, fill: root.interfaceColors.get("background") && am5.color(0x000000), fontWeight: "500", maxWidth: 20, oversizedBehavior: "truncate" });
var label = axisRange.get("label");
label.onPrivate("radius", function () { label.set("maxWidth", label.get("maxWidth")); });
// Set maxWidth adapter on circular labels label.adapters.add("maxWidth", function (maxWidth, target) { var dataItem = target.dataItem; if (dataItem) { var value = dataItem.get("value", 0); var endValue = dataItem.get("endValue", 0);
var position = xAxis.valueToPosition(value); var endPosition = xAxis.valueToPosition(endValue);
var angle = axisRenderer.positionToAngle(position); var endAngle = axisRenderer.positionToAngle(endPosition);
var radius = target.getPrivate("radius", 0);
var arcLength = (2 * Math.PI * radius * Math.abs(endAngle - angle)) / 360 - 10;
if (arcLength < 40) { target.set("forceHidden", true); } else { target.set("forceHidden", false); }
return arcLength; } });});
chart.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;}{ "type": "RadarChart", "settings": { "startAngle": -180, "endAngle": 0 }, "properties": { "xAxes": [ "#axis-0" ], "radarContainer": { "children": [ { "type": "Label", "settings": { "fill": { "type": "Color", "value": "#000000" }, "centerX": { "type": "Percent", "value": 50 }, "textAlign": "center", "centerY": { "type": "Percent", "value": 50 }, "fontSize": "2em" } } ] } }, "refs": [ { "axis-0": { "type": "ValueAxis", "settings": { "min": 0, "max": 100, "textType": "radial", "strictMinMax": true, "renderer": { "type": "AxisRendererCircular", "settings": { "innerRadius": -30 }, "properties": { "labels": { "properties": { "template": { "settings": { "fontSize": 20 } } } }, "grid": { "properties": { "template": { "settings": { "forceHidden": true } } } }, "ticks": { "properties": { "template": { "settings": { "visible": true, "strokeOpacity": 1 } } } } } } } } }, { "axisRange-0": { "axis": "#axis-0", "settings": { "bullet": { "type": "AxisBullet", "settings": { "sprite": { "type": "ClockHand", "settings": { "pinRadius": { "type": "Percent", "value": 7 }, "radius": { "type": "Percent", "value": 80 }, "bottomWidth": 20 } } } }, "value": 2 }, "__parseLogic": "axisRange" } }, { "axisRange-1": { "axis": "#axis-0", "settings": { "label": { "type": "AxisLabelRadial", "settings": { "inside": true, "fill": { "type": "Color", "value": "#000000" }, "tooltipPosition": "pointer", "text": "Safe", "forceInactive": true, "fontWeight": "500", "maxWidth": 72.93804605477054, "oversizedBehavior": "truncate", "forceHidden": false } }, "tick": { "type": "AxisTick", "settings": { "visible": false } }, "axisFill": { "type": "Slice", "settings": { "visible": true, "fill": { "type": "Color", "value": "#4281a4" }, "tooltipText": "Safe", "fillOpacity": 30, "tooltip": { "type": "Tooltip", "settings": { "getFillFromSprite": false, "autoTextColor": false }, "properties": { "background": { "settings": { "fill": { "type": "Color", "value": "#000000" } } } } } } }, "value": 0, "endValue": 10 }, "__parseLogic": "axisRange" } }, { "axisRange-2": { "axis": "#axis-0", "settings": { "label": { "type": "AxisLabelRadial", "settings": { "inside": true, "fill": { "type": "Color", "value": "#000000" }, "tooltipPosition": "pointer", "text": "Low risk", "forceInactive": true, "fontWeight": "500", "maxWidth": 72.93804605477054, "oversizedBehavior": "truncate", "forceHidden": false } }, "tick": { "type": "AxisTick", "settings": { "visible": false } }, "axisFill": { "type": "Slice", "settings": { "visible": true, "fill": { "type": "Color", "value": "#9cafb7" }, "tooltipText": "Low risk", "fillOpacity": 30, "tooltip": { "type": "Tooltip", "settings": { "getFillFromSprite": false, "autoTextColor": false }, "properties": { "background": { "settings": { "fill": { "type": "Color", "value": "#000000" } } } } } } }, "value": 10, "endValue": 20 }, "__parseLogic": "axisRange" } }, { "axisRange-3": { "axis": "#axis-0", "settings": { "label": { "type": "AxisLabelRadial", "settings": { "inside": true, "fill": { "type": "Color", "value": "#000000" }, "tooltipPosition": "pointer", "text": "Medium risk", "forceInactive": true, "fontWeight": "500", "maxWidth": 155.87609210954108, "oversizedBehavior": "truncate", "forceHidden": false } }, "tick": { "type": "AxisTick", "settings": { "visible": false } }, "axisFill": { "type": "Slice", "settings": { "visible": true, "fill": { "type": "Color", "value": "#ead2ac" }, "tooltipText": "Medium risk", "fillOpacity": 30, "tooltip": { "type": "Tooltip", "settings": { "getFillFromSprite": false, "autoTextColor": false }, "properties": { "background": { "settings": { "fill": { "type": "Color", "value": "#000000" } } } } } } }, "value": 20, "endValue": 40 }, "__parseLogic": "axisRange" } }, { "axisRange-4": { "axis": "#axis-0", "settings": { "label": { "type": "AxisLabelRadial", "settings": { "inside": true, "fill": { "type": "Color", "value": "#000000" }, "tooltipPosition": "pointer", "text": "High risk", "forceInactive": true, "fontWeight": "500", "maxWidth": 238.81413816431154, "oversizedBehavior": "truncate", "forceHidden": false } }, "tick": { "type": "AxisTick", "settings": { "visible": false } }, "axisFill": { "type": "Slice", "settings": { "visible": true, "fill": { "type": "Color", "value": "#e6b89c" }, "tooltipText": "High risk", "fillOpacity": 30, "tooltip": { "type": "Tooltip", "settings": { "getFillFromSprite": false, "autoTextColor": false }, "properties": { "background": { "settings": { "fill": { "type": "Color", "value": "#000000" } } } } } } }, "value": 40, "endValue": 70 }, "__parseLogic": "axisRange" } }, { "axisRange-5": { "axis": "#axis-0", "settings": { "label": { "type": "AxisLabelRadial", "settings": { "inside": true, "fill": { "type": "Color", "value": "#000000" }, "tooltipPosition": "pointer", "text": "Danger", "forceInactive": true, "fontWeight": "500", "maxWidth": 238.81413816431166, "oversizedBehavior": "truncate", "forceHidden": false } }, "tick": { "type": "AxisTick", "settings": { "visible": false } }, "axisFill": { "type": "Slice", "settings": { "visible": true, "fill": { "type": "Color", "value": "#fe938c" }, "tooltipText": "Danger", "fillOpacity": 30, "tooltip": { "type": "Tooltip", "settings": { "getFillFromSprite": false, "autoTextColor": false }, "properties": { "background": { "settings": { "fill": { "type": "Color", "value": "#000000" } } } } } } }, "value": 70, "endValue": 100 }, "__parseLogic": "axisRange" } } ]}gauge-with-circular-auto-truncated-labels