CODEWITHSUNDEEP
javascriptreactjshighchartsonclickreact-highcharts
Alex
Alex

Reputation: 3968

React plot options onclick event

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...

Upvotes: 5

Views: 6488

Answers (3)

Alex
Alex

Reputation: 3968

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

Upvotes: 8

Deep 3015
Deep 3015

Reputation: 10075

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
                }
            }
        }
    }
},

Upvotes: 0

Cpalitzyne
Cpalitzyne

Reputation: 63

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

Upvotes: 0

Related Questions