React plot options onclick event

Question

I have made a highcharts column chart in my react application, and am now trying to add an onClick event to the chart. My aim is that when the user click a column, I can obtain the values of the X and Y axis, and then call a function from the page.

The onClick event is achieved using plotoptions, as follows:

plotOptions={{
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: () => {
          this.fuction.call(this, 1);
        }
      }
    }
  }
}}

The problem with this is that I can call the function, but I cannot access the values of the column.

So, I try this:

plotOptions={{
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: function () {
          console.log(this);
        }
      }
    }
  }
}}

This way, I can access the values on the column, through this but cannot call the function, as this does not hold the current page object.

My question is, how can I combine the two, so I can access the value of the selected column and call the function on the page?

I have tried this:

plotOptions={{
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: function (e) {
          console.log(this);
          console.log(e);
        }
      }
    }
  }
}}

Which gives me the onClick event, and the column, but not the current page object.

I have also tried this:

plotOptions={{
  column: {
    cursor: 'pointer',
    point: {
      events: {
        click: (e) => { console.log(this); console.log(e);  }
      }
    }
  }                    
}}

But this also does not give me what I need.

I am sure this is not very difficult, I just cannot find it, or the correct search term...

score 8 · Accepted Answer · answered May 03 '17 at 08:11

8

plotOptions={{
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: (e) => { console.log(this); console.log(e.point.category); console.log(e.point.y);  }
      }
    }
  }
}}

Now this contains the current state of the page, and I can access the information from the column from e.point

answered May 03 '17 at 08:11

Alex

3,730
9
43
94

what is I can't use 'this' because I use a function component? – Shinji035 Jan 08 '20 at 16:24
@Shinji035 I am not sure what you mean? – Alex Jan 08 '20 at 16:29
I use react function component, so there is no 'this' keyword in function component . – Shinji035 Jan 09 '20 at 03:33

score 0 · Answer 2 · answered May 02 '17 at 16:33

0

Have you tried this ?

click: function(e) {
    console.log(
        e.yAxis[0].value, e.xAxis[0].value
    )
}

You may find more infos following this link :

http://api.highcharts.com/highcharts/chart.events.click

answered May 02 '17 at 16:33

Cpalitzyne

63
5

You should add at least the core information that will be found behind the link, since once the link is broken, the information would not be available for any user. – Fuzzzzel May 02 '17 at 17:05

Deep 3015 · Answer 3 · 2017-05-02T16:54:28.690

0

In plotOption click event is like this

JS Bin demo

plotOptions: {
    series: {
        cursor: 'pointer',
        point: {
            events: {
                click: function () {
                    console.log('X: ' + this.x + ', Y: ' + this.y);
                    //call function passing this values as arguments
                }
            }
        }
    }
},

edited May 02 '17 at 16:54

answered May 02 '17 at 16:49

Deep 3015

9,929
5
30
54

React plot options onclick event

3 Answers3