Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
This stock is -0.52% for the day, but at first glance the price appears to have significantly dropped.
As an occasional user of the Robinhood mobile app, it always struck me how the stock charts were displayed in a square format and with no y-axis labeling. On one hand, it seemed to be a savvy design choice to take advantage of the available screen real estate, but on the other it seemed to make every stock appear overly volatile due to the exaggerated height of the y-axis and lack of labeling for context.
The design has since been changed to display charts in a more landscape rectangular size, but it got me thinking about design patterns for stock charts. What are the standards? I did a deep dive across 10 financial sites/apps and took stock (!) of the common practices in displaying financial charts.
The criteria
Even though Robinhood was the impetus for this exploration, after some initial research I decided to focus on sites and apps that were built more for casual information consumption rather than investing. This was partially due to laziness — most investing sites/apps require an account to access market information. Here's the general criteria I used to pick the sites to evaluate:
Should be primarily used for financial news or general market information
Need to be able to look up stocks without an account
Must have a website and mobile app
Should be highly ranked on Google when searching “Apple stock price”, e.g.
The sites/apps
These are the 10 sites/apps that made the cut:
Apple Stocks
Google search widget
Yahoo Finance
Marketwatch
WSJ
CNN
CNBC
Bloomberg
MSN
Investing.com
One minor exception here — Apple's Stocks doesn't have a web experience, so I evaluated the desktop app. Not totally fair when I get into comparing desktop vs mobile consistency, since as a Marzipan app the Stocks desktop app is likely sharing the same codebase as the mobile app and gets a lot of consistency by default.
The patterns
An entire book could be written on the subtle nuances of stock chart design patterns, but these are the high level patterns that stood out as I compared them:
There was a clear pattern here, no surprises — all 10 charts I evaluated were line charts with some type of fill. Seven of them were solid fills, and three had a downward gradient fill that transitioned to 0% opaque.
This is likely a purely stylistic design choice, but whether intentional or not I think the gradient fill is functionally better because it helps reinforce that (in most cases) the bottom of the y-axis is not zero and what we're being shown is likely a clipped view depending on the time period and the stock's value.
Chart type options on Yahoo Finance.
It's also worth noting that 4 of the 10 sites/apps offered other chart types on the desktop experience (but defaulted to line charts), I assume to appeal to more advanced investors. Each of the 4 had at least candlestick charts as one of the additional options, and the ones that had more types were typically variations on line and candlestick charts.
Color usage
Every site/app uses color in some way to indicate whether a stock is up or down on the day (most typically, the price change amount and percentage text for the current day is green or red). Surprisingly, only some of them add color treatments to the chart itself to indicate gain/loss over the displayed period of time. Apple, Yahoo, Google, and the Wall Street Journal (on the mobile app only, oddly enough) change the color of the entire line and fill to green or red. I think this is a considerate design decision because regardless of the time period, at a glance it's obvious if the stock is up or down overall. Maybe most sites/apps don't do it because they don't want to cause potential confusion between the color display for gain/loss of the current day vs the selected time period?
On Google search results, the current day is up so green text displays at the top, but when switching the time period to 6 months it's down so the chart is red. Confusing?
