Finished Charts, Not a Grammar
Pick a chart, give it data, and get a polished one with tooltips, animation, loading states and export built in. Every chart shares one vocabulary, so there are fewer ways to go wrong.
Accessible by Default, and Free
Named for screen readers, with the data as a table they can read, keyboard navigation with the tooltip following focus, reduced motion and a colour-blind-safe palette. All on by default.
One Script Tag or One Config
Plain D3.js that runs in any page from a CDN, any framework through the wrappers, or React. A chart is also a JSON spec, which a schema checks for you, or for your coding agent.
What's New in Version 3
Accessibility built in
Charts named for screen readers, data tables, keyboard navigation, reduced motion and the Okabe–Ito palette, on by default.
Theming and dark mode
Every colour around the data is a CSS custom property, and the charts follow the page’s color-scheme.
SVG and PNG export
One call, exportChart(), downloads the chart as an SVG or a PNG, with its styles and an optional title.
Chart specs and JSON Schemas
Describe a chart as JSON and validate it before drawing; the wrappers say what each wrong value should be.
Made for coding agents
llms.txt, an agent skill inside the package, and errors that suggest the fix and link the API page.
TypeScript, D3 v7 and three packages
Typed charts in @britecharts/core, @britecharts/wrappers and @britecharts/react, responsive by default and tree-shakable.
Coming from version 2? Read the migration guide.
Tutorials
Britechart tutorials allow new users to get started and learn the basic components of the library. They are meant to be a learning experience ideal for newcomers:
How-To Guides
The Britecharts how-to guides provide step by step instructions on how to accomplish standard tasks with the library. We have multiple guides for specific type of users:
Topics
Where we discuss important concepts for Britecharts, giving context to some of our decisions to help understand how we have created the library.