Skip to main contentCarbon Design System

Basic charts

Basic 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

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)-60,000-40,000-20,000020,00040,000Jan 1357911131517192019 Annual Sales FiguresDataset 1Dataset 2
Area (time series)010,00020,00030,00040,00050,00060,00070,000Conversion rateJan 1357911131517192019 Annual Sales FiguresDataset 1Dataset 2Dataset 3
Stacked area (time series)020,00040,00060,00080,000100,000120,000140,000Jan 1357911131517Dataset 1Dataset 2Dataset 3
Stacked area (time series with uneven data)020,00040,00060,00080,000100,000120,000140,000Jan 1357911131517Dataset 1Dataset 2Dataset 3
Stacked area (percentage)0%20%40%60%80%100%Jan 1357911131517Dataset 1Dataset 2Dataset 3
Stacked area (time series)020,00040,00060,00080,000100,000120,000140,000Jan 1357911131517Dataset 1Dataset 2Dataset 3
Stacked area (percentage)0%20%40%60%80%100%Jan 1357911131517Dataset 1Dataset 2Dataset 3

Bar (vertical)

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.

Simple bar (discrete)010,00020,00030,00040,00050,00060,00070,000QtyMoreSoldRestockingMiscQtyMoreSoldRestockingMisc
Simple bar (custom legend order)010,00020,00030,00040,00050,00060,00070,000QtyMoreSoldRestockingMiscRestockingMiscSoldQtyMore
Simple bar (centered legend)010,00020,00030,00040,00050,00060,00070,000QtyMoreSoldRestockingMiscQtyMoreSoldRestockingMisc
Simple bar (truncated labels)010,00020,00030,00040,00050,00060,00070,0006591DA8668C339...347FEDE2F74037...232D788298773B...58B01AADFA87E5...Qty6591DA8668C3...347FEDE2F740...232D78829877...58B01AADFA87...Qty
Simple bar (customized domain)-100,000-50,000050,000100,000QtyMoreSoldRestockingMiscQtyMoreSoldRestockingMisc
Simple bar (time series) with dense data010,00020,00030,00040,00050,000Åžub 1, 10:1010:1510:2010:2510:3010:3510:40data
Simple bar (time series - Turkish)010,00020,00030,00040,00050,00060,00070,000Oca 1234567QtyMoreSoldRestockingMisc

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.

Grouped bar (discrete)-60,000-40,000-20,000020,00040,00060,000QtyMoreSoldRestockingMiscDataset 1Dataset 2Dataset 3Dataset 4
Grouped bar (selected groups)-40,000-20,000020,00040,00060,000QtyMoreSoldRestockingMiscDataset 1 Dataset 2 Dataset 3 Dataset 4

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.

Stacked bar (discrete)020,00040,00060,00080,000100,000120,000140,000160,000180,000200,000QtyMoreSoldRestockingMiscDataset 1Dataset 2Dataset 3Dataset 4
Stacked bar (time series)020,00040,00060,00080,000100,000120,000Jan 135791113151719Dataset 1Dataset 2Dataset 3Dataset 4

Bar (horizontal)

Simple horizontal bar (discrete)QtyMoreSoldRestockingMisc010,00020,00030,00040,00050,00060,00070,000QtyMoreSoldRestockingMisc
Simple horizontal bar (centered legend)QtyMoreSoldRestockingMisc010,00020,00030,00040,00050,00060,00070,000QtyMoreSoldRestockingMisc
Simple horizontal bar (truncated labels)6591DA8...DD0C231347FEDE...10EB0F9232D788...EBB92E258B01AA...C46B86EQty010,00020,00030,00040,00050,00060,00070,0006591DA...D0C231347FED...0EB0F9232D78...BB92E258B01A...46B86EQty
Simple horizontal bar (time series)Jan 1234567010,00020,00030,00040,00050,00060,00070,000QtyMoreSoldRestockingMisc
Grouped horizontal bar (discrete)QtyMoreSoldRestockingMisc-60,000-40,000-20,000020,00040,00060,000Dataset 1Dataset 2Dataset 3Dataset 4
Stacked horizontal bar (discrete)QtyMoreSoldRestockingMisc020,00040,00060,00080,000100,000120,000140,000160,000180,000200,000Dataset 1Dataset 2Dataset 3Dataset 4
Stacked horizontal bar (time series)Jan 135791113151719020,00040,00060,00080,000100,000120,000Dataset 1Dataset 2Dataset 3Dataset 4

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)10,00020,00030,00040,00050,00060,000Annual sales10,00011,00012,00013,00014,00015,00016,000No. of employeesDataset 1Dataset 2
Bubble (time series)010,00020,00030,00040,00050,00060,00070,000Jan 1357911131517192019 Annual Sales FiguresDataset 1Dataset 2Dataset 3Dataset 4
Bubble (discrete)010,00020,00030,00040,00050,000QtyMoreSoldRestockingMisc2019 Annual Sales FiguresDataset 1Dataset 2Dataset 3Dataset 4

Donut

Donut38.2%33.1%12.7%10.2%5.1%0.6%196,200BrowsersJQAI 2M4L1L22I P66EP L22...Misc2V2N 9KYPM ver...YEL48 Q6XK YEL48J9DZ F37AP
Donut (centered)38.2%33.1%12.7%10.2%5.1%0.6%196,200BrowsersJQAI 2M4L1L22I P66EP L22...Misc2V2N 9KYPM ver...YEL48 Q6XK YEL48J9DZ F37AP

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 (discrete)010,00020,00030,00040,00050,000Conversion rateQtyMoreSoldRestockingMisc2019 Annual Sales FiguresDataset 1Dataset 2Dataset 3Dataset 4
Line (centered legend)010,00020,00030,00040,00050,000Conversion rateQtyMoreSoldRestockingMisc2019 Annual Sales FiguresDataset 1Dataset 2Dataset 3Dataset 4
Line (discrete with truncated labels)010,00020,00030,00040,00050,000Conversion rateQtyMoreSold347FEDE2F74037...Misc2019 Annual Sales FiguresDataset 1Dataset 2Dataset 3LongLabelShoul...
Line (discrete with customized domain)10,00015,00020,00025,00030,00035,00040,00045,00050,000Conversion rateQtyMoreMisc2019 Annual Sales FiguresDataset 1Dataset 2Dataset 3Dataset 4
Line (selected groups)010,00020,00030,00040,00050,000Conversion rateQtyMoreSoldRestockingMisc2019 Annual Sales FiguresDataset 1 Dataset 2 Dataset 3 Dataset 4
Line (time series)010,00020,00030,00040,00050,00060,00070,000Conversion rateJan 1357911131517192019 Annual Sales FiguresDataset 1Dataset 2Dataset 3Dataset 4
Line (time series with customized domain)010,00020,00030,00040,00050,00060,00070,000Conversion rateJan 5791113152019 Annual Sales FiguresDataset 1Dataset 2Dataset 3Dataset 4
Line (dense time series)020,00040,00060,00080,000Conversion rateJan 135791113152019 Annual Sales FiguresDataset 1Dataset 2
Line with thresholds (time series)010,00020,00030,00040,00050,00060,00070,000Conversion rateJan 1357911131517192019 Annual Sales FiguresDataset 1Dataset 2Dataset 3Dataset 4

Pie

Pie38.2%33.1%12.7%10.2%5.1%0.6%JQAI 2M4L1L22I P66EP L22...Misc2V2N 9KYPM ver...YEL48 Q6XK YEL48J9DZ F37AP
Pie (centered)38.2%33.1%12.7%10.2%5.1%0.6%JQAI 2M4L1L22I P66EP L22...Misc2V2N 9KYPM ver...YEL48 Q6XK YEL48J9DZ F37AP

Gauge

Gauge semicircular -- danger status42%-13.37%
Gauge circular -- warning status42%-13.37%
Gauge circular without delta67%null%

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 (linear x & y)010,00020,00030,00040,00050,000Annual sales01,0002,0003,0004,0005,0006,0007,0008,000No. of employeesDataset 1Dataset 2
Scatter (time series)010,00020,00030,00040,00050,00060,00070,000Jan 1357911131517192019 Annual Sales FiguresDataset 1Dataset 2Dataset 3Dataset 4
Scatter (discrete)010,00020,00030,00040,00050,000QtyMoreSoldRestockingMisc2019 Annual Sales FiguresDataset 1Dataset 2Dataset 3Dataset 4
Scatter (discrete with long label)010,00020,00030,00040,00050,000Qty6591DA8668C339...SoldRestockingMisc2019 Annual Sales FiguresDataset 1Dataset 2Dataset 3LongLabelShoul...

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 (discrete)010,00020,00030,00040,00050,000Conversion rateQtyMoreSoldRestockingMisc2019 Annual Sales FiguresDataset 1Dataset 2Dataset 3Dataset 4
Step (time series)010,00020,00030,00040,00050,00060,00070,000Conversion rateJan 1357911131517192019 Annual Sales FiguresDataset 1Dataset 2Dataset 3Dataset 4

Meter

Meter Chart - with statusesDataset 156%
Meter Chart - statuses and custom colorDataset 156%
Meter Chart - no statusDataset 156%

Radar

Radar0100PriceUsabilityAvailabilityPerformanceQualityProduct 1Product 2
Radar (centered)0100PriceUsabilityAvailabilityPerformanceQualityProduct 1Product 2
Radar - Missing datapoints030LondonMilanParisNew YorkSydneySugarOilWater
Radar - Dense010EatingDrinkingSleepingWorkingWalkingRunningCyclingSwimmingJanuaryFebruaryMarchAprilMay