# Britecharts: a D3.js v5 component library you compose yourself

> Britecharts ships each chart as a UMD module exposing the D3 reusable API pattern, so you build a visualization by chaining methods and calling the component on a selection. It suits teams already comfortable with D3 who want Eventbrite's chart designs without adopting a framework wrapper.

**britecharts/britecharts** — Composable Charting Library based on reusable D3.js components.

- Repository: https://github.com/britecharts/britecharts
- Website: http://britecharts.github.io/britecharts/
- Stars: 3,716 · Forks: 215
- Language: JavaScript
- License: Apache-2.0
- Published: 2026-09-23 · Updated: 2026-09-23 · Language: en
- Canonical page: https://hysenlabs.com/projects/britecharts-britecharts

## The problem Britecharts solves for D3 users

Writing D3 from scratch means writing the same axis, scale, margin and transition code for every chart on every page. Britecharts packages that work as individual components. The README describes it as a client-side "reusable Charting Library" based on D3.js v5, offering "charts and components that can be composed together". The audience is a JavaScript team that has already accepted D3 as its rendering layer and does not want a second abstraction on top of it. The library does not hide D3; it hands you a D3 component you call on a selection. That is the whole contract, and it is why the README's key features list is only three words long: reusability, composability, design.

## How the reusable API pattern shapes the data flow

Every Britecharts component is a function that returns itself, so you configure it by chaining setters and then render it by calling it on a D3 selection that already holds data. The README's usage example shows exactly that shape: setters for width and height, then datum and call on a container. The common API methods across components are width, height and margin. Chart-specific methods live on the individual charts and are documented per component, with the README linking a separate API page and demo page for the line chart, bar chart, donut chart, stacked bar chart, grouped bar chart, bullet chart, brush chart, scatter plot, sparkline chart, stacked area chart and step chart, plus the mini tooltip, tooltip and legend components. Composition happens at the selection level: because a tooltip or legend is itself a component with the same calling convention, you attach it to the same container you used for the chart. Distribution is UMD, so the same module works through AMD, CommonJS or a script tag, and the README notes you also need the d3-selection submodule to select the chart container.

## Installing Britecharts and rendering a first bar chart

The README gives one install command, and it installs two packages: the library and d3-selection. Run it in your project root.

```bash
npm install britecharts d3-selection
```

The package.json in the repository sets main to dist/bundled/britecharts.min.js, so a bundler that resolves the main field will pick up the bundled build without extra configuration. The README also says you can load Britecharts from the project's CDN, as its demo page does, or work in the linked JSBin and CodePen sandboxes. For a first render, follow the README's own example: configure the chart, then hand it a data-bound container.

```js
barChart
    .width(500)
    .height(300);

barContainer.datum(dataset).call(barChart);
```

The container is a D3 selection, and datum binds your array to it before call invokes the chart. If you see nothing, the usual cause is a container with zero height or a dataset whose shape does not match what the chart expects; the README defers those details to the per-chart API pages. Britecharts also ships minimal CSS styling, which the README says can be loaded independently or as a bundle, with a separate styling tutorial covering the options.

## Where Britecharts is the wrong choice

The library assumes you are working in a D3 mental model. If your team writes React components with props and state, Britecharts does not meet you there: the README points Angular users at ngx-britecharts and its demos, and states that a React wrapper was being prepared, so there is no first-party React integration described in the README. You would manage the container ref, the selection and the re-render on data change yourself. There is a second constraint worth naming. The npm version in the repository's package.json is 2.18.4, while the most recent release listed is 2.3.0 from 2017-10-26, and the README's own community roadmap section still carries the line "This project is in active development", which the release history does not corroborate. Treat that sentence as a claim from the README rather than a description of the release cadence. The last push to the repository was on 2026-09-22, so the codebase is not abandoned, but the published release tags are old and the README does not document a rollback or version-pinning procedure for upgrades.

## Britecharts against Vega-Lite and Observable Plot

The closest alternative in spirit is a declarative grammar such as Vega-Lite or Observable Plot, where you describe the chart in a JSON or JavaScript spec and the library decides the marks. Britecharts inverts that: you hold the component and call it on your own selection, so the D3 selection lifecycle stays in your code. That difference matters when you need to interleave chart rendering with other D3 work on the same SVG. It costs you the declarative brevity, because every chart needs its own configuration chain and its own container. Against a full component framework like a React charting package, Britecharts' advantage is that it does not own your render loop; its disadvantage is that nothing is reactive, so you re-invoke the component when data changes.

## Building and upgrading the library itself

If you contribute to or vendor Britecharts rather than consume it, the repository ships a Dockerfile based on node:12 and a Makefile that wraps it. The Makefile targets are build, shell, docs, run, stop and clean. The docs target runs the image with port 1234 mapped to 8001 inside the container, mounts ./docs and ./src, and executes yarn docs; the run target does the same with yarn demos:serve. The package.json scripts mirror this: build runs webpack --env=production after a prebuild step that runs the styles script, docs compiles demos and runs the styles pipeline through Grunt, and test runs karma start --env=test. The yarn.lock file is copied into the image before yarn install, which keeps dependency resolution reproducible. On the licence side, Britecharts is Apache-2.0, which permits commercial use and modification and requires you to preserve the licence and notice files; it also includes a patent grant. That is a summary of the identifier, not legal advice, and your own counsel should review how you redistribute the bundled build.

## Conclusion

Adopt Britecharts if your team already writes D3 selections and wants bar, line, donut, brush, sparkline or tooltip components that follow one API shape. Do not adopt it if you need a framework-native component tree with declarative props: the README points Angular users at ngx-britecharts and says a React wrapper was still being prepared, so React and Vue teams carry the integration work themselves. Before committing, verify that the npm package's main entry resolves to dist/bundled/britecharts.min.js in your bundler, confirm d3-selection is installed alongside it, and check whether the chart you need has an API page and a demo in the documentation, because the README lists API and demo links for only some components.

## FAQ

### What are the top 5 React chart libraries?

The README does not rank React chart libraries. It points Angular users to ngx-britecharts and says a React wrapper for Britecharts was being prepared, so Britecharts itself is not presented as a React component library.

### What is the best open source charting software?

The README makes no claim about being the best. It describes Britecharts as a client-side reusable charting library based on D3.js v5, distributed as UMD modules and licensed Apache-2.0.

### What is the best React chart library in 2026?

The README does not compare React chart libraries or name a best one. For Britecharts, it states that a React wrapper was being prepared and directs Angular users to ngx-britecharts instead.

### Which JS chart library is the best?

The README does not rank JavaScript chart libraries. It states that Britecharts components are written in ES2016 with a test-driven methodology, and lists reusability, composability and design as its key features.

## Sources

- [britecharts/britecharts on GitHub](https://github.com/britecharts/britecharts)
- [License: Apache-2.0](https://github.com/britecharts/britecharts/blob/master/LICENSE)
- [Project website](http://britecharts.github.io/britecharts/)
- [README](https://github.com/britecharts/britecharts/blob/master/README.md)
- [Releases](https://github.com/britecharts/britecharts/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/britecharts-britecharts