Clickable circular labels
In amCharts 5, labels need to have a background to be able to be compatible with pointer interactions such as hover and click. However, circular labels do not support backgrounds. This demo solves the issue by adding a Slice element into such labels.
/** * --------------------------------------- * 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, wheelX: "panX", wheelY: "zoomX" }));
// Add cursor// https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursorvar cursor = chart.set( "cursor", am5radar.RadarCursor.new(root, { behavior: "zoomX" }));
cursor.lineY.set("visible", false);
// Create axes and their renderers// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axesvar xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { maxDeviation: 0.1, groupData: false, baseInterval: { timeUnit: "month", count: 1 },
renderer: am5radar.AxisRendererCircular.new(root, { minGridDistance: 50 }),
tooltip: am5.Tooltip.new(root, {}) }));
// adds a slice under the labelxAxis.get("renderer").labels.template.setup = function (label) { var slice = label.set( "background", am5.Slice.new(root, { fill: am5.color(0x000000), fillOpacity: 0, cursorOverStyle: "pointer" }) );
label.on("labelAngle", function () { slice._markDirtyKey("radius"); });
slice.adapters.add("radius", function (radius, target) { // make text non-interactive label.text.set("forceInactive", true); // remove if it's range if (label.dataItem?.get("isRange")) { label.set("background", undefined); } return label.getPrivate("radius") + 30; });
slice.adapters.add("startAngle", function (startAngle, target) { return label.get("labelAngle") - (xAxis.getCellWidthPosition() * 360) / 2; });
slice.adapters.add("arc", function (startAngle, target) { return xAxis.getCellWidthPosition() * 360; });
slice.adapters.add("innerRadius", function (innerRadius, target) { return xAxis.get("renderer").getPrivate("radius"); });};
xAxis.get("renderer").labels.template.events.on("click", function (event) { console.log(event.target.dataItem?.get("label").text.get("text"));});
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5radar.AxisRendererRadial.new(root, {}) }));
// Create series// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_seriesfunction createSeries(name, field) { var series = chart.series.push( am5radar.RadarLineSeries.new(root, { name: name, xAxis: xAxis, yAxis: yAxis, valueYField: field, valueXField: "date", tooltip: am5.Tooltip.new(root, { labelText: "{valueY}" }) }) );
series.bullets.push(function () { return am5.Bullet.new(root, { sprite: am5.Circle.new(root, { radius: 5, fill: series.get("fill") }) }); });
return series;}
var series1 = createSeries("Series #1", "value1");var series2 = createSeries("Series #2", "value2");
// Add scrollbarschart.set("scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));chart.set("scrollbarY", am5.Scrollbar.new(root, { orientation: "vertical" }));
// Generate and set data// https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_datavar data = [ { date: 1704114995289, value1: 492, value2: 616 }, { date: 1706793395289, value1: 540, value2: 645 }, { date: 1709298995289, value1: 575, value2: 609 }, { date: 1711977395289, value1: 549, value2: 620 }, { date: 1714569395289, value1: 553, value2: 658 }, { date: 1717247795289, value1: 549, value2: 649 }, { date: 1719839795289, value1: 562, value2: 599 }, { date: 1722518195289, value1: 530, value2: 598 }, { date: 1725196595289, value1: 569, value2: 634 }, { date: 1727788595290, value1: 618, value2: 655 }, { date: 1730466995290, value1: 620, value2: 673 }, { date: 1733058995290, value1: 592, value2: 641 }];
var value1 = 500;var value2 = 600;
series1.data.setAll(data);series2.data.setAll(data);
// Animate chart and series in// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animationseries1.appear(1000);series2.appear(1000);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": { "panX": false, "panY": false, "wheelX": "panX", "wheelY": "zoomX", "cursor": { "type": "RadarCursor", "settings": { "behavior": "zoomX" }, "properties": { "lineY": { "settings": { "visible": false } } } }, "scrollbarX": { "type": "Scrollbar", "settings": { "orientation": "horizontal" } }, "scrollbarY": { "type": "Scrollbar", "settings": { "orientation": "vertical" } } }, "properties": { "series": [ "#series-0", "#series-1" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1" ] }, "refs": [ { "data-0": [ { "date": 1704114995289, "value1": 492, "value2": 616 }, { "date": 1706793395289, "value1": 540, "value2": 645 }, { "date": 1709298995289, "value1": 575, "value2": 609 }, { "date": 1711977395289, "value1": 549, "value2": 620 }, { "date": 1714569395289, "value1": 553, "value2": 658 }, { "date": 1717247795289, "value1": 549, "value2": 649 }, { "date": 1719839795289, "value1": 562, "value2": 599 }, { "date": 1722518195289, "value1": 530, "value2": 598 }, { "date": 1725196595289, "value1": 569, "value2": 634 }, { "date": 1727788595290, "value1": 618, "value2": 655 }, { "date": 1730466995290, "value1": 620, "value2": 673 }, { "date": 1733058995290, "value1": 592, "value2": 641 } ] }, { "axis-0": { "type": "DateAxis", "settings": { "maxDeviation": 0.1, "groupData": false, "baseInterval": { "timeUnit": "month", "count": 1 }, "renderer": { "type": "AxisRendererCircular", "settings": { "minGridDistance": 50 } }, "tooltip": { "type": "Tooltip" } } } }, { "axis-1": { "type": "ValueAxis", "settings": { "renderer": { "type": "AxisRendererRadial" } } } }, { "series-0": { "type": "RadarLineSeries", "settings": { "name": "Series #1", "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "value1", "valueXField": "date", "tooltip": { "type": "Tooltip", "settings": { "labelText": "{valueY}" } } }, "properties": { "data": "#data-0", "bullets": [ { "type": "Bullet", "settings": { "sprite": { "type": "Circle", "settings": { "radius": 5, "fill": "@series.get('fill')" } } } } ] } } }, { "series-1": { "type": "RadarLineSeries", "settings": { "name": "Series #2", "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "value2", "valueXField": "date", "tooltip": { "type": "Tooltip", "settings": { "labelText": "{valueY}" } } }, "properties": { "data": "#data-0", "bullets": [ { "type": "Bullet", "settings": { "sprite": { "type": "Circle", "settings": { "radius": 5, "fill": "@series.get('fill')" } } } } ] } } } ]}clickable-circular-labels