performance charts ui: make returns easy to understand
performance, without the fluff
make performance charts tell the truth quickly : clear timeframe, clear context, honest volatility and optional benchmarks that are easy to understand. add a plain-language summary so users get the story in seconds, then drill into the detail.
Performance charts are where wealth platforms either build confidence or create confusion. Clients want to understand returns quickly, but they also want to trust what they are seeing. If the chart feels like a marketing graph, hides context or cannot be reconciled with reality, it will trigger doubt.
Great performance ui is honest, legible and explanatory. It helps clients answer a practical question: how is my portfolio doing, compared to what, over which period and why.
1) start with context, not a chart
Before you show a line, establish the basics.
show
what the chart represents: portfolio value, performance percent, growth
the timeframe, clearly labelled
whether figures are net of fees, where applicable - no hidden info
an as at date and last updated time
Without context, the chart becomes a guessing game.
2) use time ranges that match real client questions
Time filters are not decoration. They are decision tools.
good defaults
1 month, 3 months, 6 months, 1 year, 3 years, 5 years, since start
a clear “ytd” option
Avoid too many options. Keep it scannable. If you need more, use an advanced picker.
3) handle volatility honestly
Clients can handle volatility. What they cannot handle is confusion.
patterns that help
no artificial smoothing: don’t average or curve the line in a way that hides drawdowns
honest axes: avoid zooming the y-axis so tightly that small moves look dramatic, or so wide that big drops look tiny. label the scale clearly
show the dips, not just the end result: clients want to understand the journey, not only the final number
clear timeframes: volatility looks different over 1 month vs 5 years. make the selected period obvious
explain big moves: light annotations or a short summary like “largest drop: -x% in march” can reduce anxiety without spinning
separate value vs return: don’t force two different scales onto one chart where it becomes hard to interpret
If you compress volatility, you reduce trust.
4) make benchmark comparison understandable
Benchmark comparison is powerful, but only if it is interpretable.
do this
make benchmark optional and clearly labelled
explain what the benchmark is in plain language
keep the comparison line visually distinct and consistent
provide a clear “no benchmark” option
Clients should never have to guess what they are comparing against.
5) tooltips should explain, not just reveal numbers
Tooltips are a prime place for clarity.
a good tooltip includes
date
portfolio value or return
benchmark value if enabled
a short label that removes ambiguity, such as “portfolio” and “benchmark”
Do not rely on colour alone. Labels matter.
6) support the chart with a summary
A chart is better when it has a plain-language takeaway nearby.
Examples:
“up 4.2% over 12 months”
“highest value in this period: £x on 14 jan”
“largest drawdown: -y% in march”
This turns visual data into comprehension.
7) accessibility is non-negotiable for charts
Charts are often inaccessible by default.
baseline expectations
provide a text summary of what the chart shows
ensure keyboard access to time filters and compare controls
do not make tooltips the only way to access key values
offer a simple data table or key stats alternative where appropriate
closing thought
Performance charts are not just visualisations. They are trust builders. When you combine clear context, sensible time ranges, honest volatility and readable comparisons, clients can understand returns without you over-simplifying the story.
