0

I was wondering if it was possible to add the circular progress component https://mui.com/material-ui/react-progress/ to the middle of a nivo-react sunburst.

const CenteredMetric = ({
  nodes,
  centerX,
  centerY
}: SunburstCustomLayerProps<any>) => {
  return <MapProgress x={centerX} y={centerY} value={percentage} />;
};

This is the layer I am adding to the sunburst

const MapProgress: React.FC<MapProgressProps> = ({ value, x, y }) => {
  return (
    <CircularProgress
      variant="determinate"
      value={value}
      sx={{ position: 'absolute', left: x, top: y }}
    />
  );
};

export default MapProgress;

and this is the component I am trying to render in the middle. Any help would be appreciated!

0 Answers0