Sectors Donut

Allocation ring with hover isolate

Live preview

SPYof 503 holdings

What it does

Sector allocation donut from my trading lab. Weights as arcs around a centered symbol with legend rows on the right. Hover a row or an arc and the rest dims so one weight reads at a time.

• Symbol and caption strings

• Ring thickness 6 to 20 px

• Dark and light themes, accent color

• Arc length = weight % of the ring

Staggered draw-in, respects reduced motion.

Props

Symbol · Caption · Thickness · Theme · Accent

Formula

arc length = weight % of the 360 degree ring

Tradeboard

The terminal your desk lives in.

Built with love by

© 2026 Tradeboard UI. All rights reserved.

MIT licensed

Create a free website with Framer, the website builder loved by startups, designers and agencies.