Show the data. Then get out of the way.
Visual design for analytics is the discipline of removing everything that does not help the user arrive at a decision in one breath.
"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away."
Restraint over decoration.
A dashboard earns trust by removing things, not adding them. If a pixel is not carrying a meaning, delete it.
Hierarchy before color.
Size, weight, and spacing do the work first. Color is the last 10 percent, used to signal, not to fill.
One question per surface.
Each chart, tile, or page answers a single question. Multiple questions become a dashboard, not a chart.
A human-trusted interface.
A dashboard earns trust the old way: the numbers, the lineage, and the layout are consistent. The same metric is named the same thing everywhere. Last week's answer reconciles to this week's.
A launchpad for AI.
On top of that trusted surface, a curated data model and the semantic context behind the charts give an LLM the substrate to take the reader past the page. Ask the follow-up, drill in, pivot. Same data, next question.
Ship, then listen.
Audiences disagree about how to read data. The chart people actually use to make a decision wins. Iterate early.
Color.
Eight hues, one role each. Color is the last layer applied, after hierarchy and spacing have done their job. If you cannot defend the meaning of a color in one sentence, it should not be on the page.
If color carries meaning and you stay consistent, a single hero color can brand every chart in the product. Click any swatch below to recolor the page, or flip the theme above. The change persists across the rest of the guide.
- Default to one signal color per chart. The eye locks on the pattern faster.
- Multiple colors are fair game when each one carries a defensible meaning. Stage, segment, region, status. Never use color to decorate.
- Pick colors on purpose. Document what each color means in a legend or caption so readers (and future you) can defend the choice.
- Reuse the same color for the same thing across every chart in a product. Region "West" should be one color, not five.
- Always test color choices in both light and dark mode. Most dashboards fail in dark.
- Pair red and green with shape or label so colorblind readers are not stranded.
Typography.
A font is a brand signature. The same chart in Calibri reads like Excel, in Helvetica Neue like Apple, in Georgia like the Wall Street Journal. Pick the one that says what you mean about the work, then use it across every surface so the brand reads the same in every chart.
Click a font below to apply it to the entire guide. Like the hero color, the choice persists.
Numbers.
Currencies, percentages, counts, dates, durations. The format carries half the meaning of the number. Pick a convention, document it, and apply it everywhere a value appears.
Match the precision to the decision. A board metric for the year does not need three decimal places. A reconciliation column does. When in doubt, show fewer digits on tiles and full precision on tables.
The same metric should look the same in every place it appears. Revenue is "$1.2M" on the home tile and "$1.2M" on the embedded report. Inconsistency forces the reader to reconcile numbers in their head, and they will not trust either.
Core charts.
The workhorses. A summary tile for the headline, a table for the detail, bars and lines for almost everything else. Most analytics products spend 95 percent of their surface inside this set.
Label first (small, tertiary). Number second (large, primary, tabular). Delta third (color carries direction, an arrow carries it for colorblind readers). Period explicit, not implied.
| Region | Revenue | Deals | Avg cycle |
|---|---|---|---|
| West | $4,200,000 | 28 | 38 |
| Central | $3,100,000 | 22 | 41 |
| East | $2,600,000 | 18 | 44 |
| South | $1,400,000 | 10 | 47 |
| Total | $11,300,000 | 78 | 42 |
Labels left-aligned. Numbers right-aligned with tabular figures. Header tracked in caps. A totals row only when totals are defensible. No zebra striping (row height does the work).
Honor the request. Some audiences want the table because the table is how they work. A defensible middle ground is to give them the table and pair a small chart above or beside it that enhances how the table is read (a trend sparkline per row, a totals bar at the top, a distribution beside the column). The chart aids consumption; the table answers the question they asked. If forced to choose, ship the table.
Six ways to shape a bar chart.
The workhorse of analytics. Most questions a stakeholder asks fit inside a bar chart, a line chart, or a summary tile. Pick the variant by the question, not the aesthetic. Every variant below still anchors at zero.
Categorical comparison with short labels. Reach for this first. Five to ten categories, sorted by value, baseline at zero. The reader's eye drops down the bars in order.
Rotated vertical bars. Use when category labels are long, when there are more than ten categories, or when the chart needs to read top-to-bottom like a leaderboard. Sort by value, largest at top.
One bar per series, side-by-side within each category. Best for comparing two or three series across a small number of categories. More than three series and the eye loses the pattern; switch to a small-multiples grid.
Series stack into a single bar per category. The full bar is the total; the segments are the parts. Strong when total magnitude is the headline and the mix is the secondary story. Hard to compare middle segments precisely.
Each bar normalized to 100%. Hides totals on purpose; reveals composition shift. Use when the story is "the mix is changing" and the absolute size is a distraction. Pair with a totals line or table when readers will ask "how much."
Bars grow from a central zero in both directions. Use for year-over-year deltas, sentiment scores, variance from plan. Positive and negative are visually inseparable from the same baseline, which is the whole point.
Six ways a line chart can do its job.
The first four below plot the same seven values, four different ways. The last two answer richer questions: comparing multiple series and reading a single line against a target. Pick on purpose.
Direct segments between known points. Use when each point is real and the path between them is just visual continuity. Honest. Boring on purpose.
Markers emphasize that each value is a measured observation. Use when the count of points matters (weekly metrics, eight quarters of history) and the reader should read them one at a time.
Easy on the eye, dishonest on the math. The curve implies values between the points that you never measured. Reserve for trend visualization where the reader should not anchor on individual values.
Value holds flat until it changes at a known moment. Use for counts that change at discrete events: subscriptions, headcount, contract status. Slope between points is meaningless and should look that way.
Two to four lines on the same axes for side-by-side comparison. Label the lines at their endpoint instead of in a legend when space allows. Past four series, the lines tangle; switch to small multiples.
A line plus context. Target line, acceptable band, last-year comparison, forecast band. The annotation does the work the reader would otherwise do in their head ("is this good?"). Keep annotations subtle so the data still leads.
Pick the mark that fits the question.
A bar answers "how much for each category." A line answers "how is it changing over time." Match the geometry to the question first, the aesthetics second.
Relationship between two continuous variables. Spend vs revenue, days-open vs deal-size. Look at the cloud, not the individual dots.
Actual against target with quality bands in the background. One line replaces three charts (current, goal, range). Strong on dense executive dashboards.
Shape of a distribution: deal-size, page-load time, days-to-close. Shows where the bulk lives and where the tail starts. Better than a histogram when bin choice is arbitrary.
Part-to-whole, sparingly. Three or four slices, never more. Reach for a bar chart first; choose a donut only when the "whole equals 100" message matters more than the comparison.
Bar chart's quieter cousin. Same comparison job, less ink. Use when bars feel too heavy and the categories should breathe (executive summaries, long category lists). Unlike bars, the axis does not need to start at zero. The dot encodes a position, not an area, so a focused range is fair game.
A line chart with magnitude under it. Use when the area itself carries meaning (cumulative spend, total minutes watched). Avoid stacking more than two or three series; readers will lose the bottom layers.
Bars touch on purpose. The shape answers "how is this variable distributed?" The bin size is a design choice; expose it when the reader needs to trust the shape.
Two categorical axes, one continuous value encoded in color. Use for activity by hour-of-day, retention by cohort, leads by region and stage. Hot spots jump out before the reader has read a single number.
A line chart small enough to sit inline next to a number. No axes, no labels, no legend. Use for trend at a glance: tiles, table cells, dense executive views.
Five-number summary at a glance: min, Q1, median, Q3, max, plus outliers. Compares distribution shape across groups in less space than four histograms. Standard for "how does this vary across teams, regions, or cohorts."
One chart per category, same axes, tight grid. Replaces a tangled multi-series line. The reader compares shapes, not colors. Tufte's most under-used pattern.
Two units on one chart: revenue (bars, left axis), margin percent (line, right axis). Use only when the two series share a story. Label both axes explicitly so the reader cannot confuse the scales.
Two points in time, one line per entity. Shows who moved up, who moved down, and by how much. Cleaner than grouped bars when you have more than four or five categories.
Two values per category, connected by a bar. Use for target vs. actual, before vs. after, men vs. women. The gap itself is the chart's argument.
One cell per day, arranged like a wall calendar. Color encodes activity. Reveals weekly seasonality, holiday troughs, and streaks faster than a line chart over the same range.
A bar chart on a diet. Same comparison job as a horizontal bar, but the line plus dot reads lighter on the page. Use when many short bars would look like a wall of ink.
Sorted bars plus a cumulative line. Answers "what drives 80 percent of this?" Find the elbow, draw the line, ship the focus. Standard for defect analysis, support tickets, and churn reasons.
Each row is a cohort. Each column is a month since signup. The triangle reveals whether newer cohorts retain better than older ones. The SaaS product manager's daily driver.
New chart types arrive every year. The rules above (one signal color per series, anchor bars at zero, label numbers honestly, sort by value, match precision to decision) apply to all of them. Learn the mark, then apply the same craft.
Fancy charts.
Sometimes the chart is the story. These ask for more space because the relationship they show is the point: how a pipeline flows, how a funnel drains, how money moves through a quarter. Reach for them only when a stacked bar or line will not do.
Flows between categories where each band's width equals the magnitude. 200 leads from three sources, qualified or disqualified, ending in won, lost, or open. Use it for sales pipelines, website user journeys, supply chain volume, budget allocation. Expensive on cognitive load. Reach for it only when the flow story is the point.
Sequential drop-off between defined stages. Strong for sales pipelines, signup flows, onboarding. Show both the absolute counts at each stage and the conversion rate between stages so the reader can see where the leak is.
Opening value, contributions in and out, closing value. Use it to explain how a number moved: revenue bridge, headcount delta, gross to net, plan-to-actual. Color encodes direction; the dotted lines tell the reader where each step started.
- One color per series. Reuse the same color for the same series across charts.
- Sort bars by value, not by alphabet. The reader's eye should go from biggest to smallest.
- Anchor numeric axes at zero unless the chart explicitly compares change.
- Right-align numbers in tables. Always. The eye reads totals down the column.
- Format with the same precision as the decision. A revenue figure does not need three decimals.
- Show the data, then the average, then the band. Detail before summary.
- × A bar chart axis starting at anything other than zero. Non-negotiable. Bars encode quantity by area, and area is a lie unless the baseline is zero.
- × Pie charts with more than five slices.
- × Red and green as the only two colors a chart distinguishes by.
- × Y-axis truncation on line charts that exaggerates a 2% change into a wall. If the change is small, show that it is small.
- × Three decimal places on a metric that drives a million dollar decision.
- × Gradient fills on bars or lines. The data should not need a sunset behind it.
- × Drop shadows on data marks. Shadows are for surfaces, not for values.
Section 02: User experience.
Visual is the surface. Experience is the path the user walks across it. Section 02 is in draft, coming soon. Email if you want a sneak peek or want to shape what lands first.