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
ui charts pack
1 person working on the design featuring this asset - Personal License.
2+ people - Team License
Which one should I get?
comes for
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
Charts and Graphs included
in the pack
Charts and Graphs included
in the pack
Line Chart
30min+ to design
Use to show continous data that changes over time. Effective to identify trends
Area Chart
30min+ to design
Use in the same cases as Line but with only up to 2 charts
Bubble Chart
30min+ to design
Use when you need to compare different values fast
Funnel Chart
30min+ to design
Used to visualize the progressive reduction of data as it passes from one phase to another
Bar Chart
30min+ to design
Best used for comparing values of different categories, works good with a lot of bars
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
Column / Line Chart
30min+ to design
Used to compare expected (line) and actual (bar) data
Gantt Chart
30min+ to design
Used when needed to display start and end time of different values
Grouped Bar Chart
30min+ to design
At first glance might look similar to Stacked but displays values that don't have to be related
Candlestick Chart
30min+ to design
Mostly used in financial charts to determine price movement based on past patterns
Waterfall Chart
30min+ to design
Use when you need to demonstrate changes positive and negative changes on a variable
Scatter Plot Chart
30min+ to design
Used to display values for two variables for a set of data in the form of dots
Bullet Chart
30min+ to design
Highlighting performance against benchmark using conditional formatting
Treemap
30min+ to design
Use when you have a large amount of hierarchical data and a space constraint
Sankey Chart
30min+ to design
Used to display how quantities are distributed among items between two or more stages
Horizon Chart
30min+ to design
Reduces size by dividing the chart into bands and layering to create a nested form
Pie Chart
30min+ to design
Use to compare parts of 100% value. Better using stacked bar chart instead though
Donut Chart
30min+ to design
Same use case as for pie chart but slightly better visual perception
Heatmap
30min+ to design
Use when you have a matrix of values that you need to compare at a glance
Radar Diagram
30min+ to design
Used to show collection of data points wrapped around a circle with a list of categories
Chart Error
30min+ to design
Use for edge cases when info cannot be loaded
Empty State
30min+ to design
Use for edge cases when there's no info to show yet
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
“We used this as a base for our dashboard analytics. It helped us iterate quickly and test which of the visualizations work best. Recommended!”
Trusted by 5,000+ designers & entrepreneurs from organizations like
Save 25%
