Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 903
Alex Avatar asked May 02 '17 16:05

Alex


Video Answer


1 Answers

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

like image 141
Alex Avatar answered Oct 26 '22 06:10

Alex