Highchart- OnClick event, get "category" and "name" from stacked bar chart

Question

I have a Highchart stacked chart with a category and dataset as follows:

categories =["Clark","Steven","Steve","Robert","Max"]
series =[{
name: "Wins"
data: [0, 0, 0, 0, 0]
},
{
name: "Losses"
data: [0, 0, 0, 0, 0]
},
{
name: "Open"
data: [22, 9, 8, 7, 7]
}]

The current output can be seen in the screenshot below.

I already have seen through the documentation how to create a click event on different parts of the stacked chart. However- I'd specifically like to pass the name of the individual (found in the "categories" set and the "name" attribute (wins, losses, open) to a function- eventually setting "State" within my React app.

Is this possible? How can I access both of those variables within the same function>

Thanks for your time!

score 1 · Accepted Answer · answered Mar 12 '20 at 15:34

Here is an example how to trigger the custom function and passing the category and the name as an argument.

Demo: https://jsfiddle.net/BlackLabel/sycqfv9e/

  plotOptions: {
    series: {
      point: {
        events: {
          click() {
            console.log(this.series.name)
            customFun(this.category, this.series.name)
          }
        }
      }
    }
  },

If you would like to update a state in your React app this way, please reproduce your current work on the online editor which I could work on. You can use this template: https://stackblitz.com/edit/react-nwseym?file=index.js

Yes! This is exactly what I was looking for. Thanks so much for your help! — mg2019, Mar 13 '20 at 15:58

score 0 · Answer 2 · answered Mar 12 '20 at 01:55

0

You need to debug it, try to run console.log(this) on your event listener, after that you should be able to find the properties you're looking for. An easy way to do that is to look on the console of your browser you're running the application.

It should be in an object like this:

this.chart.series[index].name

answered Mar 12 '20 at 01:55

Bernardo Marques

925
2
10
33

Thanks for the replay Bernardo! I was indeed able to find the chart by logging "this". Through "this.chart.xAxis[0].categories" I'm able to access the "Categories" array- however- how do I get the specific row? that I am clicking on? – mg2019 Mar 12 '20 at 13:10
I also tried using "event.target.getAttribute("aria-label")" and was able to get a string containing the row data (1. Clark, 22. Open), though if there is a cleaner way to get just the "category" and "name" data than splicing a string, I would definitely prefer that. – mg2019 Mar 12 '20 at 13:16

Highchart- OnClick event, get "category" and "name" from stacked bar chart

2 Answers2