A four-state 3D extruded donut on react-three-fiber — hovered slices lift and slide outward with a drei Html tooltip, the compact total floats in the hole, and a keyboard-focusable DOM legend mirrors the hover, all themed by runtime-resolved chart tokens.
Files · 2
Dependencies
npm packages
zod
three
@react-three/fiber
@react-three/drei
lucide-react
Registry items
utils
Registry Items
chart-3d-donut
Configuration
Name
chart-3d-donut
Type
UI
Description
A four-state 3D extruded donut on react-three-fiber — hovered slices lift and slide outward with a drei Html tooltip, the compact total floats in the hole, and a keyboard-focusable DOM legend mirrors the hover, all themed by runtime-resolved chart tokens.