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