[SOLVED] How can I change mouse cursor on hover over Amcharts 5 column element?

How can I change mouse cursor on hover over Amcharts 5 column element?

I am using Amcharts 5 and have looked through piles of documentation on how to build a drill-down/clickable column chart. I am getting there but it requires tons of effort compared to other charting components.

When users can click on individual columns, I will redraw the chart and show additional data (sort of like a hierarchical chart but just for column data).

Now, I want to change a simple thing as the mouse cursor to cursor:pointer to indicate the element is clickable. How do I do that?

Using the standard example I have added the following:

// capture clicks on columns.
series.columns.template.events.on("click", function(ev) {
var country = ev.target.dataItem.dataContext.country;
console.log(country);
  // do something with country variable
});

// code for changing mouse pointer? How to..?

Full code:

am5.ready(function() {
var root = am5.Root.new("chartdiv");

root.setThemes([
  am5themes_Animated.new(root)
]);

var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: true,
  panY: true,
  wheelX: "panX",
  wheelY: "zoomX",
  pinchZoomX: true
}));

var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
cursor.lineY.set("visible", false);

var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });

xRenderer.grid.template.setAll({
  location: 1
})

var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
  maxDeviation: 0.3,
  categoryField: "country",
  renderer: xRenderer,
  tooltip: am5.Tooltip.new(root, {})
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  maxDeviation: 0.3,
  renderer: am5xy.AxisRendererY.new(root, {
    strokeOpacity: 0.1
  })
}));

var series = chart.series.push(am5xy.ColumnSeries.new(root, {
  name: "Series 1",
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "value",
  sequencedInterpolation: true,
  categoryXField: "country",
  tooltip: am5.Tooltip.new(root, {
    labelText: "{valueY}"
  })
}));

series.columns.template.events.on("click", function(ev) {
var country = ev.target.dataItem.dataContext.country;
console.log(country);
  // do something with country variable
});

// Set data
var data = [{
  country: "USA",
  value: 20
}, {
  country: "China",
  value: 30
}, {
  country: "Japan",
  value: 40
}];

xAxis.data.setAll(data);
series.data.setAll(data);

}); // end am5.ready()

#chartdiv {
  width: 100%;
  height: 200px;
}

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

<div id="chartdiv"></div>

See JSFiddle.

Solution

It turns out there are event handlers for hovering over the chart elements, called pointerover and pointerout in Amcharts 5.

<script>
    ...

    series.columns.template.events.on("pointerover", function (ev) {
        document.body.style.cursor = "pointer";
    });

    series.columns.template.events.on("pointerout", function (ev) {
        document.body.style.cursor = "default";
    });
</script>

More information can be found here for those interested: https://www.amcharts.com/docs/v5/reference/series/#pointerover_event