How can I get an event handler wired up for the @splunk/visualizations point.click event?

[MrCheck]

I've spent hours and hours trying to figure out how to do what I thought would be very easy.

There are examples of how to use the Pie chart on the Examples tab of this page:

https://splunkui.splunk.com/Packages/visualizations/?path=%2FPie

They all work great and have an option to show the code.  None of them do anything with the point.click event.

On the Events tab, it shows the data changing when you click a wedge, but doesn't have an option to show the code.  How is it doing what it's doing?

How do you wire up the event to fire your own code?  I started with the first example on the Examples tab, then tried to add a handler.  I've tried onClick, pointClick, onPointClick, onPressed, tried passing it in through options and as a last resort, tried every idea ChatGPT could come up with.  It finally gave up and suggested I ask here.

If I wrap the Pie in a div and add an onClick handler to the div, I can capture the event and see which wedge was clicked.  But that seems messy and not how it's intended to be used.

Anybody got any ideas on how to get this wired up? Just seeing what the code looks like that's running on the Events tab would do the trick.

[MrCheck · Accepted solution]

Found it.

Adding onEventHandler={myHandler} wasn't enough.  I also had to add hasEventHandlers={true}.  Then it'll actually fire myHandler.

<Pie
  onEventHandler={myHandler}
  hasEventHandlers={true}
  ...
/>
  

[ITWhisperer]

What is it you are trying to achieve and why can you not do it using simple drilldowns?

[MrCheck]

I'm trying to get the product to do what the examples show it doing.  On the Events tab, I see the Pie chart responding to a click event and updating the screen to show which wedge was clicked.  I'm simply trying to re-create what is shown to be a feature of the product.

Could I accomplish the same thing in a different way?  Of course.  But I'm trying to learn how to use the actual features of the product.  This is obviously a feature since I can see it working on the Event tab of the page linked above.  I just don't know HOW to do what I see it doing.

[MrCheck]

As I mentioned before, if I put a div around it, I can make it work.

const pieClicked = (event) => {
    console.log(`Clicked: ${event.nativeEvent.point.options.name}`);
};
<div onClick={pieClicked}>
  <Pie ... />
</div>

But I can't seem to get the event handler to fire if I try to attach it to the Pie itself.  I'm guessing I'm missing something simple.