Breadcrumbs on top of the chart

[racedin]

When we are drilling down or zooming into the sunburst chart, the hierarchical level is not shown.

A breadcrumbs showing the level of node currently focused would be ideal.

Is it possible to add the breadcrumbs as an option? So that those who need it can make use of it.

[vasturiano]

@racedin you can build a side component that shows that information. You can get navigation events from the chart by tapping into the onClick method. Something like:

myChart.onClick(node => {
  myChart.focusOnNode(node); // maintain default behaviour of zooming when clicked
  updateBreadcrumb(node); // this method's implementation is up to you
});

[RajS999]

How this can be done in the react component built using react-kapsule? 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. 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. Link to the errored line is the codesandbox.