CODEWITHSUNDEEP
javascriptreactjshighchartsreact-highcharts
mg2019
mg2019

Reputation: 309

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

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!

Currentoutupt

Upvotes: 0

Views: 2182

Answers (2)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

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

Upvotes: 1

Bernardo Marques
Bernardo Marques

Reputation: 1055

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.

enter image description here

It should be in an object like this:

this.chart.series[index].name

Upvotes: 0

Related Questions