Portfolio Chart
A portfolio chart inspired by Robinhood. Click and drag across the line to move through time; the dollars, cents, and percentage change smoothly to the value under your cursor.
Making of
Robinhood is a company known for having one of the best-designed user experiences in the fintech industry. As a daily user I wanted to see if I could rebuild the portfolio chart, not just how it looks, but how it feels to use.
The more I use apps I love, the more I catch myself asking why. Why that timing, why that shape, why that width. Rebuilding the details I admire is the fastest way I've found to actually learn them.
The detail I love most is how the numbers change. Instead of changing one digit from 4 to 7, each character is its own little wheel. It rolls up or down to the new value, and disappears entirely when a digit is no longer needed. Pair that with dragging across the timeline and the chart feels less like a graph and more like an instrument.
My first pass at the range selector (1D, 1W, 1M…) used equal-width buttons with a sliding pill. It felt stiff. When I switched to a version where the pill resized to match each label, it clicked. Robinhood does something similar, and it is subtle enough that I never noticed until I built it myself.
The last touch was a soft linear gradient under the line, fading into the background. It's industry standard for price charts, and for good reason. The gradient color gives an immediate sense of portfolio performance without even needing to read the line, while the fade keeps the chart feeling lightweight and the focus where it belongs.