CODEWITHSUNDEEP
anychart
robstarbuck
robstarbuck

Reputation: 8119

Listen for click / hover on individual axis labels

I'm looking for a way to change the value (or format) for an individual series label when hovering it in anycharts.

Currently I'm only able to access the entire axis and I can find no getter method for individual labels so as to attach a listener.

xAxis.labels().listen('mouseOver', function(e) {
    console.log(this, e.target);
});

This jsfiddle is as far as I got (see console log), this as well as the event.target reference the entire axis but not the label:

https://jsfiddle.net/robstarbuck/pbhd4b7L/9/

Upvotes: 0

Views: 382

Answers (3)

AnyChart Support
AnyChart Support

Reputation: 3905

This issue was fixed in the 7.14.0 release, use this code:

  xAxis.labels().listen('mouseOver', function(e) {
    var labelIndex = e.labelIndex;
    var label = this.getLabel(labelIndex);
    var value = xAxis.scale().ticks().get()[labelIndex];
    label.format(value * 2);
    label.fontColor('red');
    label.draw();
  });

with the latest version: https://jsfiddle.net/2t08ahkg/3/

Upvotes: 0

AnyChart Support
AnyChart Support

Reputation: 3905

Indeed, there was a little bug with cache and format() function, our dev team made the fix, so please check the working sample:

var labelIndex = e.labelIndex;
var label = this.getLabel(labelIndex);
var value = xAxis.scale().ticks().get()[labelIndex];
label.format(value * 2);

https://jsfiddle.net/pbhd4b7L/13/ – it also shows how to work with tick values:

Currently it takes the js from branch, but this fix will be included in the upcoming release – 7.14.0 version (ETA: May 2017)

Upvotes: 1

Roman Lubushkin
Roman Lubushkin

Reputation: 213

Our API is a little bit complicated here, but we're working hard to improve it. Does this what you're looking for?

    var labelIndex = e.labelIndex;
    var label = this.getLabel(labelIndex);
    label.fontColor('red');
    label.draw();

https://jsfiddle.net/pbhd4b7L/10/

Upvotes: 1

Related Questions