How to add CLICK events on AMCHARTS 5 labels (x and y axis)?

Question

I am trying to add basic interactivity to my AMCHARTS 5 labels. Take this chart as an example:

I need to be able to click on the names at the left of the chart. That is actually yAxis because I use an inverted chart. In the function that creates the series, I placed this code:

series.columns.template.events.once("click", function(ev) {
                    console.log("Clicked on a column", ev.target);
                });

And it makes my bars to be clickable. I don't know how to refer to the labels on the left.

got solution?. I'm also looking for same – Lavan Giri Aug 20 '22 at 05:10 — Lavan Giri, Aug 20 '22 at 05:10

score 0 · Answer 1 · answered Jan 26 '23 at 21:22

Labels as interactive elements in amCharts 5 are tricky. Basically, it's super hard to determine hover/click over just text because it's impossible to completely eradicate antialising, and the actual colored area is super tiny.

Therefore, if we need tooltip to be interactive - have a hover tooltip or handle click events - we need to add a background to it.

The background does not necessarily have to be visible: we can just set its fillOpacity: 0 to make it completely transparent.

Source: Labels – amCharts 5 Documentation

After the declaration and initialization of your yAxis, you can put this piece of code:

yAxis.get("renderer").labels.template.setup = target => {
  target.setAll({
    cursorOverStyle: "pointer",
    background: am5.Rectangle.new(root, {
      fill: am5.color(0x000000),
      fillOpacity: 0
    })
  });
};
  
yAxis.get("renderer").labels.template.events.on("click", e => {
  console.log(e.target.dataItem.dataContext.category);
});

Full example:

am5.ready(() => {

  let root = am5.Root.new("chartdiv");

  let chart = root.container.children.push(am5xy.XYChart.new(root, {}));

  let data = [{
    category: "Category 1",
    value: 10
  }, {
    category: "Category 2",
    value: 20
  }, {
    category: "Category 3",
    value: 15
  }];

  let yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
    categoryField: "category",
    renderer: am5xy.AxisRendererY.new(root, {
      inversed: true,
      cellStartLocation: 0.1,
      cellEndLocation: 0.9
    })
  }));

  yAxis.data.setAll(data);
  
  yAxis.get("renderer").labels.template.setup = target => {
    target.setAll({
      cursorOverStyle: "pointer",
      background: am5.Rectangle.new(root, {
        fill: am5.color(0x000000),
        fillOpacity: 0
      })
    });
  };
  
  yAxis.get("renderer").labels.template.events.on("click", e => {
    console.log(e.target.dataItem.dataContext.category);
  });

  let xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
    min: 0,
    renderer: am5xy.AxisRendererX.new(root, {})
  }));

  let series = chart.series.push(am5xy.ColumnSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    valueXField: "value",
    categoryYField: "category"
  }));

  series.data.setAll(data);

});

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

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

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

How to add CLICK events on AMCHARTS 5 labels (x and y axis)?

1 Answers1