Skip to content
UI Kit
Accent color

React charts for line, bar, area and donut

Line, bar, area and donut charts, radial charts, heatmaps and funnels for the everyday numbers.

7 components · 22 variants
Switch category

The everyday charts, readable for everyone

Charts turn rows of numbers into something people grasp in a second. The seven chart components here are drawn in SVG by the kit itself, take your data as plain rows and format every number in the language of the page. Each one keeps a data table for screen readers and lets people step through values with the arrow keys.

Line chart shows a trend over time, with several series or this year against last year. Bar chart compares categories, grouped, stacked or horizontal for long labels. Area chart stresses volume. Donut chart shows part of a whole, best with five slices or fewer. Radial chart fits data that goes round, such as hours of a day. Heatmap shows patterns over weeks, Funnel the drop between the steps to a goal.

Pick the chart from the question, a trend wants a line, a ranking wants bars. Start bar axes at zero. Use the accent for the series that matters and quiet tones for the rest, the charts read the kit tokens, so dark mode and your brand color apply by themselves.

On this page

Every component of this category. Pick one to jump to its variants.

bar-chart

Bar chart

Columns and bars with rounded data ends, a 2 px surface gap, value labels where they fit, tooltips and arrow keys.

Props and details · Bar chart

Simple

One series, values on the caps, the busiest day keeps the accent.

Grouped

Two years side by side per quarter, the current one in the accent.

Stacked

Three channels stacked to the monthly total, separated by a thin surface gap.

Horizontal

Long category names on the left, bars sorted by size, the value at each tip.

line-chart

Line chart

One or several lines over time with nice ticks, a crosshair tooltip, arrow key stepping and a data table for screen readers.

Props and details · Line chart

Single series

A smooth line in the accent, the last point marked and labelled.

Several series

Three sources in accent, grey and a light accent tone, with a legend and one tooltip for all.

This year and last year

The current year in the accent, last year as a quiet dashed grey line.

Straight with dots

Straight segments and a dot on every month, for counts where each point matters.

radial-chart

Radial chart

Data that goes round: 24 hours as a clock, twelve months as a rose with true areas, weekdays by hour as a ring heatmap, and groups with their parts as a sunburst.

Props and details · Radial chart

Clock of hours

Twenty four bars around a clock face from midnight, the busiest hour in the accent and named in the middle.

Open in Studio

Rose of months

Twelve wedges from January, the area of each wedge is the value, so summer does not look bigger than it is.

Open in Studio

Ring heatmap

Seven rings for the weekdays, 24 segments for the hours, five accent steps for the value. Arrow keys walk around and between rings.

Open in Studio

Sunburst

Groups inside, their parts outside. A part lights up its whole path, the list beside it picks a group.

Open in Studio

area-chart

Area chart

A line with a quiet tint below, as a wash, a gradient or stacked bands with a surface gap.

Props and details · Area chart

Simple

Daily values with an even wash of the accent, weekends stand out by themselves.

Gradient

The tint fades towards the baseline, the line stays crisp on top.

Stacked

Three channels stacked to the weekly total, the tooltip adds them up.

donut-chart

Donut chart

Part to whole as a ring or a half gauge, the total in the middle, a legend with values and shares.

Props and details · Donut chart

Donut with legend

Three slices, the total in the center. Pointing or arrow keys swap the center to the slice.

Half gauge

A half ring against a capacity, the free rest stays as a quiet track.

Compact pair

Two small rings side by side, legends below, shares only.

funnel

Funnel

Steps from first visit to the goal, with the share of the start and the conversion between every pair of steps.

Props and details · Funnel

Horizontal steps

Steps side by side, the flow between them as a light band, the rate on top. On phones it becomes rows.

Rows

One row per step with a bar against the start, the rate and the drop off between rows.

heatmap

Heatmap

Values as tinted cells in five accent strengths, as a calendar of weeks or a labelled matrix. Arrow keys move through the cells.

Props and details · Heatmap

Calendar

Half a year of days in weeks, months on top, weekdays on the side. On phones the latest weeks stay.

Matrix

Weekdays by opening hours, labels on both axes, one tooltip per cell.

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Charts on a page.

Often searched

Jump to

Copied to the clipboard