Question 236816 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

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

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search