DocumentationCharts

Charts

Bar charts

Vertical and horizontal, as one series, grouped or stacked, with optional thresholds drawn across the chart, each group or each bar.

Docs: Bar Chart · Axis Styling

Vertical

One series across groups, with a threshold across the chart.

Single group

One bar at 89% on a percentage y axis, with a threshold at 75%.

Grouped

A bar per series in each group, with a threshold per bar.

Stacked

Series stacked into one bar per group, with a threshold per group.

Horizontal

The same data turned on its side, with a threshold across the chart.

Single group

One bar at 89% on a percentage x axis, with a threshold at 75%.

Colors per group

Grouped, with spreadColorsPerGroup coloring by group instead of series.

Stacked

Horizontal stacks, with a threshold per group.

Axis styling

Axis titles, tick marks, axis lines and a grid, in colors set on the config.

Long labels

Labels take at most half the chart; longer ones are shortened with …

Line & area charts

Series over a numeric, date or index x axis, with a hover crosshair, zoom, and images in place of dots.

Docs: Line Chart · Area Chart

Dates and zoom

A DateTime x axis and a Fahrenheit y axis. Scroll or drag to zoom and pan both axes.

Line

Three series with a hover crosshair.

Area

Three series, filled.

Axes hidden

Both axes hidden: their space goes back to the plot.

Line with images

One series with its points drawn as images.

Area with images

The same images on an area chart.

Sparkline

No axes, no grid, no crosshair: just the shape, 80px tall.

Plot charts

Points on a numeric x axis, with zoom, ranges around each point, and overlapping points fanned out so each can be hovered.

Docs: Plot Chart

Plot

Three series of points; zoom along x.

Fan-out

Points at the same spot spread around it, joined by spokes.

Point ranges

A range around each reading, labelled axes, hours of the day on x.

Point images

Images in place of dots.

Pie & donut charts

Slices of a whole, as a pie or as a ring with room for a label in the center.

Docs: Pie Chart · Donut Chart

Pie

Five slices from the theme palette.

Donut

The same slices as a ring, with their total in the center.

Thin donut

A larger hole (innerRadius 0.8) and custom colors.

Legend

A legend is its own component, so it can sit anywhere and drive any chart. Here each one switches its chart's slices or series on and off; a hidden one keeps its color.

Docs: Legend

Legend and pie

Click a legend item to hide or show its slice.

Snacks
Chocolate Chip
Chips
Brownie
Peanuts
Candy

Legend and line

Click a legend item to hide or show its series.

Region
North
South
West