How to add custom behaviour on click event to sunburst component built with react-kapsule?

[RajS999]

When sunburst component is used in react built with react-kapsule, how can I add custom behavior on click event of any slice of sunburst.

From suggestion here, I tried something like this:

  <ReactSunburst
    //...
    data={data}
    onClick={(node) => {
      myChart.focusOnNode(node);
      console.log("clicked");
    }}
  /> 

The problem I faced is that myChart is undefined inside the onClick handler of react component. So, this gives myChart is not defined error and the chart does not perform the default zooming behavior. If I omit the first line, "clicked" gets printed to the console. Codesandbox link.

[RajS999]

Sorry, I just realized that we have to add the methods to methodNames array. So I tried this:

const ReactSunburst = fromKapsule(SunburstChart, {
  methodNames: ["onClick"]
});

<ReactSunburst
    width={200}
    height={200}
    excludeRoot
    label="name"
    size="size"
    color={(d, parent) => null}
    tooltipContent={(d, node) => `Size: <i>${node.value}</i>`}
    data={flare}
    onClick={(entry) => {
      console.log("Hello from inside onClick handler!!");
    }}
  />

Now clicking on slices zooms in as desired. However, it does not seem to invoke the onClick handler at all as the message Hello from inside onClick handler!! is not printed to the console. Here is the link to this codesandbox.

And when I we omit methodNames, the message gets printed, but the slice does not zooms in. Here is the link to sandbox with this change.

It will be of great help to find one working example of react-capsule + sunburst-chart with click event handler.

[vasturiano]

Duplicate of https://github.com/vasturiano/sunburst-chart/issues/94.