04

Charts

2023

Lantern

Accessible chart components for React. Every chart ships with a table view, keyboard controls and a text summary.

Role

Author

Stack

TypeScript, React

Install

npm i lantern-charts

Numbers

12 chart types, 22 kB, WCAG AA

Charts nobody can read

A chart is a picture of a table. If you cannot see the picture, you should still be able to get the table. Lantern renders both from the same data, so nobody has to keep them in step.

What is in the box

Twelve chart types, arrow-key navigation between points, a spoken summary that says what the trend is, and a contrast check that fails your build if a series colour is too pale.

Testing with real people

Before 1.0 I sat with three screen-reader users for an afternoon each. Their feedback changed the summary text, the focus order and the default colours. It is the only part of the project I would repeat exactly.

mail iri

Want something like this? Tell me what it should do.

$ subscribe --notes

New notes by email, when there are any. About one a month.

Iri Halvorsen

Software engineer

Bergen, Norway

Open to work from January 2027

Colophon

Set in Geist and Geist Mono

Built in Framer

No tracking, no cookie banner

buildlog_

© 2026 Iri Halvorsen. All demo work is fictional.

exit 0

Create a free website with Framer, the website builder loved by startups, designers and agencies.