How to Design Data Visualizations

Data visualization is one of the areas where design decisions have the most immediate impact on comprehension. A well-chosen chart type with clean execution communicates instantly. A poorly chosen one — even with beautiful styling — misleads or confuses.

Most data visualization mistakes happen before any design work starts, in the choice of chart type.

Choosing the right chart type

There are four primary things you might want to show with data. Match your chart type to what you're trying to communicate.

Comparison: How do values differ from each other? Use a bar chart (vertical or horizontal). Bar charts are the most versatile chart type — they're immediately readable, work for many data types, and require no interpretation learning.

Use horizontal bars when your category labels are long. Vertical bars (column charts) are better for time-based comparisons.

Trend over time: How does a value change across a time period? Use a line chart. Lines communicate continuity and direction. Bar charts can show time series, but lines make the trend more apparent.

If you have multiple series in a line chart, keep it to 3-4 lines maximum. More than that becomes a spaghetti chart that nobody can read.

Part-of-whole: How do parts make up a whole? Use a pie chart or donut chart — but only if you have 2-5 segments. More than 5 segments and the small slices become unreadable. If you have more categories, use a stacked bar chart instead.

Pie charts are also inappropriate when the values are close — small differences in arc size are hard to perceive accurately. When the comparison matters, use a bar chart.

Distribution: How are values spread across a range? Use a histogram or box plot. These are less common in product dashboards but important for analytics tools and anything showing statistical distributions.

Data-ink ratio

Edward Tufte's data-ink ratio is the most useful principle in data visualization: maximize the proportion of ink used to display actual data. Minimize everything else.

In practice, this means:

• Remove grid lines you don't need. If the data is labeled, do you need grid lines at all?
• Remove axis labels that are redundant with the data labels
• Remove backgrounds, borders, and shadows on chart elements
• Remove tick marks when axis labels are sufficient

Before you remove everything: test comprehension. Some chart types genuinely need axis labels for the chart to be readable without context. The goal is removing decoration that doesn't add information, not removing structure that aids interpretation.

A clean chart with minimal chrome looks more professional and communicates faster. The common mistake is adding visual weight (gradients, 3D effects, drop shadows) to charts, which makes them look polished but makes the data harder to read.

Color in charts

Use color to encode meaning, not for decoration. If you use different colors in a bar chart where all bars represent the same category, the colors imply differences that don't exist. Use a single color for single-category charts. Use different colors only when the colors represent different categories.

Accessible color palettes. About 8% of men have color vision deficiency, most commonly red-green. A chart that uses red for bad and green for good is inaccessible to a significant portion of your users.

Solutions:

• Use color plus a secondary visual encoding (pattern, shape, label) so the chart is readable without color
• Use colorblind-safe palettes. Okabe-Ito is a widely used colorblind-safe palette for categorical data. For sequential data (one variable, light to dark), single-hue scales (blue-based) are safer than diverging red-green scales.
• Test your charts with a colorblindness simulator

Avoid rainbow color scales. Mapping a continuous variable to a rainbow gradient (red → orange → yellow → green → blue) is perceptually misleading — the transition isn't uniform and some color distances look bigger than others. Use a single-hue or two-hue scale instead.

Limit your palette. Use 2-5 colors in a single chart. More than that and users can't track which color means what.

Design your charts in Figma

Designing for different data densities

A chart in a mobile dashboard has different constraints than a chart in a full-screen analytics view.

Low-density contexts (cards, summaries): Show the key number prominently and the trend secondary. A single stat card with a small sparkline communicates more than a full chart. Remove all axes and labels from sparklines — they're decorative trend indicators, not reference charts.

Medium-density contexts (dashboard panels): Include axis labels, keep grid lines minimal, label the key data points (highest, lowest, current). The user should be able to read the chart without additional context.

High-density contexts (full analytics pages): More detail is appropriate. Include tooltip interactions, zoomable views for long time ranges, and the ability to adjust the date range or filter. Consider whether users need to export the data.

Design your data visualization components at all three densities. A chart designed only for full-page width will break when placed in a smaller panel.

Dashboard layout principles

Dashboards fail when they try to show too much at once.

Establish hierarchy. The most important information should be largest and highest on the page. If your users need to check one number first (current MRR, active users today, tickets open), that number should be immediately visible without scrolling.

Group related information. Charts that answer related questions belong together spatially. Revenue metrics in one section, user engagement in another. Don't scatter related data across the page.

Provide context. A number without context is often meaningless. "$42,341 MRR" is a data point. "$42,341 MRR (+12% vs last month)" is information. Build comparison and change data into your chart designs.

Leave empty space. Dense dashboards feel overwhelming and hide the signal in the noise. White space between sections gives users visual breathing room and makes it clearer where one group ends and another begins.

Avoid chart decoration. 3D charts, drop shadows on bars, gradients inside bars, decorative borders — all of these reduce legibility without adding information. A flat bar chart with a clean baseline reads faster than a styled one.

Data visualization for UI designers isn't about making charts beautiful. It's about making data immediately comprehensible. Clarity is the measure.