Ways to visualize data in user interfaces
A comprehensive guide to charts, diagrams, and other types of data visualizations
This article is a comprehensive guide to the types of data visualizations employed in user interfaces, with examples and recommendations. You can get all the charts and diagrams I created for this article in the Forms & Tables design system.
Line Chart
The line chart displays trends over time with data points connected by lines. It’s ideal for monitoring time-series data, such as tracking revenue, system uptime, or customer retention rates in dashboards.
Category: Trends/Time-Series
Example: A finance dashboard showing revenue trends to identify patterns in business performance.
Area Chart
The area chart is similar to a line chart, but the area under the line is filled. It is used to emphasize the magnitude of trends, such as cumulative user growth over time.
Category: Trends/Time-Series
Example: A product analytics tool showing cumulative active users over a quarter.
Bar Chart
The bar chart uses rectangular bars to compare different categories or groups. It’s helpful for comparing metrics across categories, such as department budgets or employee performance.
Category: Comparison
Example: An HR analytics tool comparing employee satisfaction scores across teams.
Stacked Bar Chart
The stacked bar chart shows subcategories within a total to compare categories while showcasing their subcomponents, such as regional sales by product category.
Category: Comparison/Composition
Example: A sales operations dashboard showing total sales by region, broken down by product type.
Diverging Bar Chart
A diverging bar chart displays positive and negative values originating from a central baseline, often used to show contrasts or differences between categories. Use a diverging bar chart to compare opposing sentiments, values, or metrics across categories, such as survey results or financial changes.
Category: Comparison
Example: Visualizing survey results where responses range from strongly disagree to strongly agree, with negative responses (disagree) on the left of the baseline and positive responses (agree) on the right.
Column Chart
The column chart is a vertical variation of the bar chart that’s best for showing data over time, such as sales by month.
Category: Comparison
Example: A sales dashboard displaying monthly revenue comparisons across multiple product lines.
Pie Chart
The pie chart divides data into proportional slices to show parts of a whole. Use it for visualizing proportions, such as budget allocation across departments.
Category: Proportion
Example: A financial planning tool showing how much of the annual budget is spent on marketing, R&D, and operations.
Donut Chart
The donut chart is a variation of the pie chart with a blank center for annotations. It is similar to pie charts but allows for central metrics, such as a total value.
Category: Proportion
Example: A procurement dashboard visualizing vendor expenditure with the total procurement value in the center.
Scatter Plot
The scatter plot displays individual data points to show relationships or distributions. It is used to identify correlations, such as the relationship between customer lifetime value and acquisition costs.
Category: Distribution/Relationship
Example: A marketing analytics dashboard plotting customer acquisition cost against average revenue per user (ARPU).
Bubble Chart
The bubble chart is a scatter plot where point size represents an additional variable. It’s used for showing three variables at once, such as profitability, revenue, and market share.
Category: Distribution/Relationship
Example: An product performance dashboard visualizing product profitability (Y-axis), revenue (X-axis), and market size (bubble size).
Heatmap
A heatmap uses color intensity to represent data density or values in a matrix. It is used for comparing data across two dimensions, such as system performance metrics.
Category: Distribution
Example: An IT operations dashboard showing server response times by region and time of day.
Histogram
A histogram displays frequency distributions of data in bins. It is used to visualize distributions, such as the frequency of sales transaction values.
A histogram shows the frequency of continuous data with touching bars to indicate continuity, while a bar graph compares discrete categories with gaps between bars. Histograms group data into intervals, whereas bar graphs display individual categories.
Category: Distribution
Example: A finance dashboard analyzing transaction amounts to identify spikes or gaps.
Surplus-Deficit Chart
A surplus-deficit chart visualizes the net difference between two values over time or across categories, highlighting periods or areas of surplus (positive values) and deficit (negative values). It is used to track financial performance, resource utilization, or any scenario where comparing positive and negative balances is critical.
Category: Comparative/Trend Analysis Charts
Example: An enterprise budgeting software showing a company’s monthly cash flow to help stakeholders monitor financial health.
Tree Map
A tree map uses nested rectangles to represent hierarchical data. It’s used to visualize proportions within hierarchies, such as budget allocations within departments.
Category: Hierarchical/Proportion
Example: A budget analysis dashboard showing spending by department and sub-department.
Radar Chart
The radar chart plots data on axes radiating from a central point. It’s great for comparing multiple variables, such as team performance metrics.
Category: Comparison
Example: An employee evaluation dashboard comparing individual performance in areas like communication, technical skills, and teamwork.
Polar Area Chart
The polar area chart is a circular graph with data values represented by the radius of sectors, with each sector having an equal angle. It highlights relative magnitudes of different categories in a radial format.
Polar area charts are primarily for comparing magnitudes of individual categories. Radar charts are better for comparing multi-variable performance across multiple dimensions.
Category: Comparison
Example: An employee performance chart visualizing the distribution of time spent on different types of tasks across a department.
Gauge Chart
A gauge chart is a circular, dial-like visualization used to represent a single data value relative to a fixed range or goal. It often resembles a speedometer with a needle indicating the current value.
Category: Progress indicators
Example: Percentage of a monthly sales target achieved.
Sankey Diagram
A sankey diagram represents flows and proportions between categories. It’s used to visualize resource distribution, such as workflow efficiency or user journeys.
Category: Flow
Example: A customer journey analysis tool showing how users navigate a website from landing pages to conversions.
Funnel Chart
A funnel chart represents stages in a process, narrowing to completion. It’s used for visualizing drop-offs, such as in sales pipelines or onboarding flows.
Category: Process
Example: A CRM system tracking lead progression through a sales funnel.
Choropleth Map
The choropleth map uses color gradients to represent data intensity across geographic regions. It’s used for comparing metrics geographically, such as sales performance by state.
Category: Geographical
Example: A logistics dashboard highlighting shipping costs across regions.
Box Plot
A box plot displays data distributions with quartiles and outliers. It’s used to identify variability and outliers, such as delivery times.
Category: Distribution
Example: A supply chain analytics tool showing variability in shipment delivery times.
Bullet Chart
The bullet chart combines bar charts and qualitative ranges to show progress. It’s used to track performance against targets, such as sales quotas.
Category: Progress/Comparison
Example: A KPI dashboard showing monthly revenue progress against targets.
Step Chart
The step chart is a variation of line charts with sharp edges to show changes over time. It’s employed to visualize discrete changes, such as pricing adjustments over time.
Category: Trends/Time-Series
Example: A pricing tool showing historical changes in product pricing.
Candlestick Chart
A candlestick chart is a financial chart displaying open, close, high, and low prices. It’s used for analyzing financial data, such as stock price movements.
Category: Financial/Time-Series
Example: A financial dashboard tracking stock performance.
What other data visualizations should I add to this list?
Effective data visualization is more than presenting information — it’s about helping users understand complexity to make data-driven decisions. Whether for tracking KPIs, analyzing trends, or streamlining workflows, data visualizations help users distill insights and take meaningful actions.
Data visualization is critical for enabling decision-making and actionable insights. Each chart serves a unique purpose, and using them effectively requires understanding the context and the user’s needs. By aligning visualizations with user and business goals, interfaces can transform raw data into powerful tools for success.
I’m building a new design language called Forms & Tables. I published the first version of the design system to Figma, which contains the charts, graphs, and diagrams I used to illustrate this article. Feel free to download it and use it in your work. I hope it helps you to build UI fast and make the digital world a little better.
