Hiding axis values but keep clockhand in a Gauge chart

Question

i was tinkering with the Gauge Chart from amCharts. Using their docs I was recreating some examples. However I had an Idea in mind which I am absolutely stuck trying to build it.

The starting point is this Example

Is there a way to hide the axis values and still keep the clockhand?I would like to have something like this Gauge

I tried a lot with axis settings. Also adding an additional axis only for the clockhand has not been successful.

Every help is very appreciated.

Answer 1

I have figured it out proudly by myself. There are two things need to be done to get the result:

1. create seperate ValueAxis for the Clockhand for AxisRenderer
2. set visibility to false

Here are the important sections:

axisRenderer.labels.template.setAll({
    visible: false,
    strokeOpacity: 0.5
});


// Add clock hand
var axis2 = chart.xAxes.push(
    am5xy.ValueAxis.new(root, {
    maxDeviation: 0,
    min: 0,
    max: 100,
    strictMinMax: true,
    renderer: axisRenderer
})

var handDataItem = axis2.makeDataItem({
    value: 0
});

var hand = handDataItem.set("bullet", am5xy.AxisBullet.new(root, {
    sprite: am5radar.ClockHand.new(root, {
    radius: am5.percent(99)
})

axis2.createAxisRange(handDataItem);