Skip to main contentCarbon Design System

Simple charts

Simple charts offer a way to visualize data sets in an intuitive, easy to understand way. Every chart should tell a story and should reflect the content on the page where it is found.

Resources

Area (simple)

Area charts are similar to line charts, but the areas below the lines are filled with colors or patterns. Stacked charts are useful for comparing proportional contributions within a category. They plot the relative value that each data series contributes to the total.

Area (time series - natural curve)

Dataset 1

Dataset 2

-60,000-40,000-20,000020,00040,000Jan 1357911131517192019 Annual Sales Figures

Area (stacked)

Stacked area (time series)

Dataset 1

Dataset 2

Dataset 3

020,00040,00060,00080,000100,000120,000140,000Jan 1357911131517

Bar (simple)

Bar charts use vertical or horizontal data markers to compare individual values. You can use them to compare discrete data or show trends over time.

Horizontal simple bar (discrete)

Qty

More

Sold

Restocking

Misc

QtyMoreSoldRestockingMisc010,00020,00030,00040,00050,00060,00070,000

Bar (floating)

Horizontal floating bar (time series)

Qty

More

Sold

Restocking

Misc

Jan 1234567010,00020,00030,00040,00050,00060,00070,000

Bar (grouped)

A grouped bar chart, also known as a clustered bar graph, multi-set bar chart, or grouped column chart, is a type of bar graph that is used to compare values across multiple categories.

Vertical grouped bar (discrete)

Dataset 1

Dataset 2

Dataset 3

Dataset 4

-60,000-40,000-20,000020,00040,00060,000QtyMoreSoldRestockingMisc

Bar (stacked)

Stacked bar charts are useful for comparing proportional contributions within a category. They plot the relative value that each data series contributes to the total.

Horizontal stacked bar (discrete)

Dataset 1

Dataset 2

Dataset 3

Dataset 4

QtyMoreSoldRestockingMisc020,00040,00060,00080,000100,000120,000140,000160,000180,000200,000

Boxplot

Horizontal box plot

Q1Q2Q3Q4010,00020,00030,00040,00050,00060,00070,000

Bubble

Bubble charts use data points and bubbles to plot measures anywhere along a scale. One measure is plotted along each axis. The size of the bubble represents the third measure. You can use bubble charts to represent financial data or any data where measured values are related.

Bubble (linear)

Dataset 1

Dataset 2

Surplus

10,00020,00030,00040,00050,00060,000Annual sales10,00011,00012,00013,00014,00015,00016,000No. of employees

Bullet

Basic bullet

D3

D2

D1

Poor area

Satisfactory a...

Great area

Quartiles

Item EItem DItem CItem BItem A400/15752100/1725550/13401000/1455250/127505001,0001,5002,000

Combo

Combo (Line + Area) Time series

Health

Temperature

0100200300400500600700800900Score-20-10010203040Temperature (°C)Dec 30Jan 6132027Feb 310

Donut

Donut

JQAI 2M4L1

L22I P66EP L22...

Misc

2V2N 9KYPM ver...

YEL48 Q6XK YEL48

J9DZ F37AP

38.2%33.1%12.7%10.2%5.1%0.6%196,200Browsers

Gauge

Gauge semicircular -- danger status

42%-13.37%

Histogram

Histogram (linear)

Dataset 1

Dataset 2

Dataset 3

0123456No. of participants2030405060708090Age

Line

Line charts plot data at regular intervals connected by lines. You can use line visualizations to show trends over time and compare several data sets.

Line (time series)

Dataset 1

Dataset 2

Dataset 3

Dataset 4

010,00020,00030,00040,00050,00060,00070,000Conversion rateJan 1357911131517192019 Annual Sales Figures

Lollipop

Lollipop (horizontal) - presentation

Dataset 1

Dataset 2

Dataset 3

Dataset 4

QtyMoreSoldRestocking2019 Annual Sales Figures05,00010,00015,00020,00025,00030,00035,00040,00045,000

Pie

Pie

JQAI 2M4L1

L22I P66EP L22...

Misc

2V2N 9KYPM ver...

YEL48 Q6XK YEL48

J9DZ F37AP

38.2%33.1%12.7%10.2%5.1%0.6%

Meter

Meter Chart - with statuses

Dataset 156%

Meter (proportional)

Proportional Meter Chart

emails

photos

text messages

other

2000 GB total1699 GB used (301 GB available)

Radar

Radar

Product 1

Product 2

PriceUsabilityAvailabilityPerformanceQuality0100

Scatter

Scatter plot visualizations use data points to plot two measures anywhere along a scale, not only at regular tick marks. You can use scatter plots to explore correlations between different measures.

Scatter (time series)

Dataset 1

Dataset 2

Dataset 3

Dataset 4

010,00020,00030,00040,00050,00060,00070,000Jan 1357911131517192019 Annual Sales Figures

Sparkline

Sparkline (modified area chart)

Step

Stepped line charts plot data at regular intervals, forming a series of steps between data points. You can use line visualizations to show trends over time and compare several data sets.

Step (time series)

Dataset 1

Dataset 2

Dataset 3

Dataset 4

010,00020,00030,00040,00050,00060,00070,000Conversion rateJan 1357911131517192019 Annual Sales Figures

Word Cloud

Word cloud

Second

First

Fourth

Third

sitplaceratmassatellusipsumportanislnonhabitantipsumtempusquisFuscemorbiDuisurnaleoeratpurusestduieratfelisnon