PieChart component onClickPie

Hi,
I am trying to find what parameters are set for the onClickPie function of the PieChart component

For example, I found out how onClickTable for TableComponent is used:

<TableChart query={nrql} accountId={this.accountId} className="chart" onClickTable={(dataEl, row, chart) => {
//for learning purposes, we'll write to the console.
console.debug([dataEl, row, chart]) //eslint-disable-line
}}/>

So wondering what parameters are set onClickPie
Thanks

Hmmm. I can’t seem to find that out myself. Let me tag in @joelworrall / @dgolden / @mfrederick Perhaps they know?

As far as I know, it’s not documented, though I’m not sure why. We’ll inquire internally about this.

If I don’t know/can’t find an answer like that, regardless of what I’m using, I typically do something like this:

<PieChart
  fullWidth={true}
  onClickPie={(args) => console.log(args)}
  accountId={<your account id>}
  query={<your query>}
</PieChart>

and you’ll learn that it returns an object with 2 params, data and metadata so you can get more specific with object destructuring:

<PieChart
  fullWidth={true}
  onClickPie={({ data, metadata }) => console.log(data, metadata)}
  accountId={<your account id>}
  query={<your query>}
</PieChart>

data seems to be the slices of the pie, I suspect this isn’t super helpful except for understanding what the data is at the time the user clicks on something.
metadata is more useful and gives you the name of the segment that was clicked on metadata.name or metadata.label.

@charekc Could you expand on what you’re trying to accomplish? Perhaps we can assist in more detail if we better understand what you’re trying to do.

Yes I experimented and found that the single arg has a metadata field which I can extract info about what was clicked. Thank you.

<PieChart data={this.state.pieDataArray} fullWidth onClickPie={(pie_slice) => {
            //for learning purposes, we'll write to the console.
          console.debug("Clicked on :",pie_slice) //eslint-disable-line
     }} />
2 Likes