How can add a click listener to label of a chart with anychart and vue.js?

79 Views Asked by At

I am writing a Vue.js application for showing a radar chart using Anychart.js Library. My current problem is adding a click listener to labels of radar chart. Using plain js I can use this istruction:

chart
    .xAxis()
    .labels()
    .listen("click", function (e) {
      // get the index of the hovered labels, 0 based
      var labelIndex = e.labelIndex;
      //do something with labelIndex
    });

How can I achieve the same result using the json notation?

I am trying with this:

  chart: {
...
          xAxis: {
            labels: {
              enabled: true,
              width: "48px",
              height: "48px",
              format: function () {},
              background: {
                enabled: true,
                fill: {
                  src: myImg_path,
                  mode: "fit",
                },
              },
              listen: {
                type: "click",
                listener: function () {
                  alert("hello");
                },
              },
            },
          },
...
}

but when I click the labels nothing happens. I am not sure if the listen property is correct and I cannot find anything in anychart site about this signature. How can I solve this problem?

thanks in advance

2

There are 2 best solutions below

0
SeiryuV On

To make a click event you must follow the following structure

chart.listen("rowClick", function (e) {
  var itemName = e.item.get("name");
  chart.title("Events: Chart<br><br>" +
              "< <span style = 'color:#990000'>" +
              itemName + "</span>: rowClick >");
});

Oficial Documentation

https://docs.anychart.com/Gantt_Chart/Events

2
Alessandro Mennillo On

Nevermind, I just wrote to anychart support and they told me that utilizing listen() method is possible only with JS configuration. However, it is possible to apply the listeners after parsing JSON. I will follow this way then. Thanks to all.