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...
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With