Billboard.js: data.onclick is not firing when cursor changed

[softage0]

Description

data.onclick is not firing when the cursor(pointer) changed.

Steps to check or reproduce

When I clicked the blue circle position the above, both changes cursor of chart but only the second blue circle fire data.onclick.
It doesn't make sense that cursor and onclick don't work together in same condition.

Or please let me know if there's another event listener I can use in this case.

[netil]

Hi @softage0, as the option name states, data.onclick callback fires when data point is clicked. Is not based on cursor point. But as you pointed, it might changing the cursor when users overs on data points.

Can you provide your generation code?

[softage0]

I mostly got the solution from #1212, and now I know the trigger I need is .tooltip.onshow.

I need to track the current displayed tooltip data,
and I checked .tooltip.onshow is triggered every time the tooltip data changed.

Is there any way to get the current displayed tooltip data?
Then I can get the data in .tooltip.onshow callback.

[netil]

@softage0, one easy way is retrieve data from the tooltip element.

bb.generate({
      ...
      onshow: function() {
        this.api.$.tooltip.selectAll(".name, .value").each(function() {
            // will print out name & value respectively
            console.log(this.textContent)
        });
      }
});

[softage0]

Thanks a lot, @netil.

I got all the solutions I needed.

I left my codes for the next person who has a similar issue to me:

bb.generate({
      ...
                onshow: () => {
                    const {_parents} = this.chart.$.tooltip.selectAll('.name, .value');

                    setTimeout(() => {
                        const {__data__} = _parents[0];
                        const currentPoint = JSON.parse(__data__.current);
                        console.log(currentPoint);    // the data the current tooltip has
                    });
                },
      ...
});

[netil]

@softage0, it might better use as:

  tooltip: {
    onshow: () => {
      setTimeout(() => {
          console.log(JSON.parse(this.chart.$.tooltip.datum().current))
      });
    },
    // or if is okay retrieve data after tooltip layer is shown without wrapping with timeout
    onshown: () => {
      console.log(JSON.parse(this.chart.$.tooltip.datum().current))
    }
  }

[softage0]

Perfect! It's even better :)