Two charts taken from UI Charts Pack: Sankey & Funnel

20 ui chart templates for figma, sketch & adobe xd

Creating proper data visualization is crucial. Choosing the right chart type can be tricky and designing it can be even trickier

Learn how dataviz can be useful in your project
ArrowArrow

ui charts pack

1 person working on the design featuring this asset - Personal License.

2+ people - Team License

Ready-to-use pack of 20 charts supplied with guides on how to use them properly

Help Icon

Which one should I get?

comes for

Figma color logo
Sketch color logo
XD color logo

What makes for a good data visualization?

When working on dashboard or other data-heavy UIs it’s important to harness that data and make it capture users attention. Making your data visual helps comprehend it hundreds of times faster, which not only creates a better experience but also unveils new sides to it that might not have been visible in plain text.

Good data visualization never leaves users confused or uncertain, it never creates more questions than there were in the first place

Bubble chart illustration representing clearness
Clear
Line chart illustration representing helpfulness
Helpful
Funnel chart illustration representing helpfulness
Insightful
Stacked bar chart illustration representing simpleness
Simple

Charts and Graphs included
in the pack

Charts and Graphs included
in the pack

1

Line Chart

30min+ to design

Use to show continous data that changes over time. Effective to identify trends

2

Area Chart

30min+ to design

Use in the same cases as Line but with only up to 2 charts

3

Bubble Chart

30min+ to design

Use when you need to compare different values fast

4

Funnel Chart

30min+ to design

Used to visualize the progressive reduction of data as it passes from one phase to another

interactive
5

Bar Chart

30min+ to design

Best used for comparing values of different categories, works good with a lot of bars

interactive
6

Stacked Bar Chart

30min+ to design

Used in the same cases as regular Bar Chart but brings nested values to comparison

Waste around 25+ hrs to design this or

Save yourself days of work for less than your hourly rate

Scroll me to plans! ↓
7

Column / Line Chart

30min+ to design

Used to compare expected (line) and actual (bar) data

8

Gantt Chart

30min+ to design

Used when needed to display start and end time of different values

9

Grouped Bar Chart

30min+ to design

At first glance might look similar to Stacked but displays values that don't have to be related

10

Candlestick Chart

30min+ to design

Mostly used in financial charts to determine price movement based on past patterns

11

Waterfall Chart

30min+ to design

Use when you need to demonstrate changes positive and negative changes on a variable

12

Scatter Plot Chart

30min+ to design

Used to display values for two variables for a set of data in the form of dots

13

Bullet Chart

30min+ to design

Highlighting performance against benchmark using conditional formatting

interactive
14

Treemap

30min+ to design

Use when you have a large amount of hierarchical data and a space constraint

Become a PRO at making your raw data easier to comprehend

See plans ↓
15

Sankey Chart

30min+ to design

Used to display how quantities are distributed among items between two or more stages

16

Horizon Chart

30min+ to design

Reduces size by dividing the chart into bands and layering to create a nested form

17

Pie Chart

30min+ to design

Use to compare parts of 100% value. Better using stacked bar chart instead though

18

Donut Chart

30min+ to design

Same use case as for pie chart but slightly better visual perception

interactive
19

Heatmap

30min+ to design

Use when you have a matrix of values that you need to compare at a glance

20

Radar Diagram

30min+ to design

Used to show collection of data points wrapped around a circle with a list of categories

technical
21

Chart Error

30min+ to design

Use for edge cases when info cannot be loaded

technical
22

Empty State

30min+ to design

Use for edge cases when there's no info to show yet

use guidelines ◦ use guidelines ◦ use guidelines ◦ use guidelines ◦ use guidelines ◦ use guidelines ◦ use guidelines ◦ use guidelines ◦ use guidelines ◦ use guidelines ◦ use guidelines ◦ use guidelines ◦ use guidelines ◦ use guidelines ◦ use guidelines ◦ use guidelines
Treemap chart showcasing guidelines that are included with each data visualization

how do you know which chart to use?

When it comes to working with raw data there’s hundreds of charts or graphs to choose from.

This pack was made with beginners in mind and features a set of guidelines to help you choose the proper type of visualization for your exact case.

make them on-brand in

seconds

with this pack you’ll

create dataviz that’s

Bubble chart illustration representing clearness
Clear
Line chart illustration representing helpfulness
Helpful
Funnel chart illustration representing helpfulness
Insightful
Stacked bar chart illustration representing simpleness
Simple

“We used this as a base for our dashboard analytics. It helped us iterate quickly and test which of the visualizations work best. Recommended!”

Andrew's picture
Andrew
Product Designer at MovieFit