How to add hit/click event to AmCharts 4 Range? (ValueAxisDataItem)

Question

I'm trying to add click events to a range on a graph very similar to this

https://codepen.io/ChazUK/pen/VwjqWNJ?editable=true

for (let grading of data.gradingData) {
    var range = axis2.axisRanges.create();
    range.axisFill.fill = am4core.color(grading.color);
    range.axisFill.fillOpacity = 0.8;
    range.axisFill.zIndex = -1;
    range.value = grading.lowScore > chartMin ? grading.lowScore : chartMin;
    range.endValue = grading.highScore < chartMax ? grading.highScore : chartMax;
    range.grid.strokeOpacity = 0;
    range.stroke = am4core.color(grading.color).lighten(-0.1);
    range.label.inside = true;
    range.label.text = grading.title.toUpperCase();
    range.label.inside = true;
    range.label.location = 0.5;
    range.label.inside = true;
    range.label.radius = am4core.percent(10);
    range.label.paddingBottom = -5; // ~half font size
    range.label.fontSize = "0.9em";
}

The idea is that a user can click on a range and change the value of the hand to point to it.

I've seen that axis labels are clickable, but can't find any events on ranges or similar.

Answer 1

You need to enable interactions on the range's axisFill object as it is disabled by default. Once you do that, you can listen to the hit event on it:

range.axisFill.interactionsEnabled = true; //required so that the hit event will trigger
range.axisFill.events.on('hit', function(ev) {
  // ...
});