Beta
Sectors Donut
Allocation ring with legend cross-highlight — hovering a row or arc dims the rest so one weight reads at a time.
Sectors Donut
Allocation ring with legend cross-highlight — hovering a row or arc dims the rest so one weight reads at a time.
When to use it
Allocation and composition, where the reader wants one slice at a time rather than the whole distribution at once. The legend cross-highlight is what makes it usable above about five categories, where donuts normally fail.
Install
Adds Sectors Donut and its dependencies to your project through the shadcn CLI.
$ npx shadcn@latest add https://www.ssicevs.com/r/sectors-donut.jsonProps · SectorsDonut
| Prop | Type | Default |
|---|---|---|
| symbol? | string | "SPY" |
| caption? | string | "of 503 holdings" |
| sectors? | DonutSector[] | DEFAULT_SECTORS |
| colors? | string[] | DEFAULT_COLORS |
Generated from the component source. Run npm run props:extract after changing a signature.