ChartKit

Examples

Every chart type and configuration option in one scrollable page. Charts render from this deploy — use it to explore what ChartKit can do or visually verify a release.

Chart types

All six chart types: single and multi-series where supported.

Value formats

Number, compact, currency, and percent formatting on axes and labels.

Title & legend

Missing titles, long titles, legend on/off, and wrapped multi-series legends.

Data labels

Formatted values on bars, points, and slices: outside, large, or on-bar placement.

Chart fonts

Oxanium and Tektur apply to all chart text: title, axes, legend, and value labels. Compare side by side with ChartKit default.

bar

Bar (top)

This is an example of ChartKit's default chart font

Open in builder
bar

Bar (on bar)

This is an example of ChartKit's default chart font

Open in builder
horizontal-bar

Horizontal bar (end)

This is an example of ChartKit's default chart font

Open in builder
horizontal-bar

Horizontal bar (on bar)

This is an example of ChartKit's default chart font

Open in builder
donut

Donut

This is an example of ChartKit's default chart font

Open in builder
bar

Bar (top)

This is an example of the Oxanium font (title, axes, legend, and numbers)

Open in builder
bar

Bar (on bar)

This is an example of the Oxanium font (title, axes, legend, and numbers)

Open in builder
horizontal-bar

Horizontal bar (end)

This is an example of the Oxanium font (title, axes, legend, and numbers)

Open in builder
horizontal-bar

Horizontal bar (on bar)

This is an example of the Oxanium font (title, axes, legend, and numbers)

Open in builder
pie

Pie

This is an example of the Oxanium font (title, axes, legend, and numbers)

Open in builder
line

Line

This is an example of the Oxanium font (title, axes, legend, and numbers)

Open in builder
area

Area

This is an example of the Oxanium font (title, axes, legend, and numbers)

Open in builder
donut

Donut

This is an example of the Oxanium font (title, axes, legend, and numbers)

Open in builder
bar

Bar (top)

This is an example of the Tektur font (title, axes, legend, and numbers)

Open in builder
bar

Bar (on bar)

This is an example of the Tektur font (title, axes, legend, and numbers)

Open in builder
horizontal-bar

Horizontal bar (end)

This is an example of the Tektur font (title, axes, legend, and numbers)

Open in builder
horizontal-bar

Horizontal bar (on bar)

This is an example of the Tektur font (title, axes, legend, and numbers)

Open in builder
pie

Pie

This is an example of the Tektur font (title, axes, legend, and numbers)

Open in builder
line

Line

This is an example of the Tektur font (title, axes, legend, and numbers)

Open in builder
area

Area

This is an example of the Tektur font (title, axes, legend, and numbers)

Open in builder
donut

Donut

This is an example of the Tektur font (title, axes, legend, and numbers)

Open in builder

Branding

Watermark on (default) vs off.

Colors

Default palette, color-by-category bars, custom series colors, and palette cycling.

Sizes

Tiny through banner: true pixel size, packed together. Datasets scale with the canvas.

Edge cases

Negatives, single category, many categories, long labels, tiny slices.

Server render

Same configs rendered via /api/chart PNG (jsdom + sharp). Compare to client SVG above.