britecharts is a free, open source business intelligence & reporting project written in TypeScript and released under Apache-2.0. It has 3,719 GitHub stars, 215 forks and 1 open issues, and was last pushed 7 hours ago. On this registry it ranks #34 of 79 tracked projects in Business Intelligence & Reporting, with 5 head-to-head comparisons available. It gained 3 stars over the last 30 tracked days.

What is britecharts?

Britecharts is a client-side, composable charting library built on D3.js v5 that gives JavaScript developers reusable chart components — from bar and line charts to legends and tooltips — which can be composed together into custom data visualizations.

What it is

Britecharts is a JavaScript charting library for the browser, distributed on npm as UMD modules. Each module exposes a D3.js component written with the Reusable API pattern, and every component shares common API methods such as .width(), .height() and .margin(). The components are written in ES2016 following a test-driven methodology, and the project states a commitment to keeping them fully tested. The code is Apache-2.0 licensed, carries roughly 3,700 stars and 214 forks on GitHub, and sits in the Data & Analytics / Business Intelligence & Reporting category of this registry.

The concrete problem it solves is the amount of low-level work required to draw charts directly with D3. Instead of writing scales, axes, transitions and SVG plumbing for every visualization, a developer loads a finished component, applies data to a container, and calls the component against it. Composition is the second half of that problem: the library supplies a Legend, a Tooltip and a Mini Tooltip that attach to the charts, so assembled dashboards keep one visual language rather than accumulating one-off chart code.

Key capabilities

  • Ships fourteen chart and component types, including Line Chart, Bar Chart, Donut Chart, Stacked Bar Chart, Grouped Bar Chart, Bullet Chart, Brush Chart, Scatter Plot, Sparkline Chart, Stacked Area Chart, Step Chart, Legend, Tooltip and Mini Tooltip.
  • Exposes common API methods across components — width, height and margin — alongside chart-specific methods documented per component.
  • Rendering follows the Reusable API pattern in two steps: configure the chart with barChart.width(500).height(300);, then bind data with barContainer.datum(dataset).call(barChart);.
  • Distributed as UMD modules, so charts can be required through AMD or CommonJS modules or loaded with a script tag pointing at the file.
  • Provides minimal CSS styling that can be loaded independently or as a bundle, with a dedicated styling tutorial.
  • Written in ES2016 with test-driven development and a stated commitment to full test coverage.
  • Reachable through npm, the project CDN, and JSBin and CodePen demo projects.

Who uses it and how

  • Front-end teams assembling reporting dashboards, combining Bar, Line and Donut charts with the Legend, Tooltip and Mini Tooltip components.
  • Codebases on AMD, CommonJS or plain script-tag loading, since the UMD build targets all three without a framework-specific wrapper.
  • Interfaces that need range selection over a time series, using the Brush Chart alongside line or area charts.
  • Developers prototyping chart behavior quickly in JSBin or CodePen, or pulling the library from the CDN during evaluation.
  • Compact metrics views that use the Sparkline Chart for inline trend display next to a larger chart.

Getting started

Install the library and its selection dependency with npm install britecharts d3-selection, because the d3-selection submodule is needed to select the chart container. The same components can be loaded from the project CDN, with working examples on the Britecharts demo pages, JSBin and CodePen.

How it compares

The facts do not list commercial products that Britecharts replaces. Among the tools it names, D3.js v5 is the underlying library, and Britecharts sits above it as a layer of ready-made components built with the Reusable API pattern, so teams that would otherwise hand-write D3 charts get the same rendering engine with the chart logic already supplied. It does not remove the D3 dependency: the d3-selection submodule still has to be installed and loaded separately.

When to use it — and when not to

Britecharts runs entirely in the browser, so there is no database, file storage or mail service to operate, and nothing to render on the server. It is a poor fit for server-side rendering pipelines, non-DOM environments, or teams that expect a complete dashboard product rather than chart components they wire to their own data containers. The remaining caveats are visible in the facts rather than the code: the contributor badge reports three all-time contributors, and the documentation is spread across separate tutorial, how-to and getting-started pages, so adopters should expect to assemble their own integration guidance.

project readme (upstream, from github) — read inline

Britecharts

Britecharts is a client-side reusable Charting Library based on D3.js v5 that offers easy and intuitive use of charts and components that can be composed together to create amazing visualizations.

npm version License PRs Welcome All Contributors Twitter Follow

Bar Chart Line Chart Donut Chart
Stacked Bar Chart Stacked Area Chart Grouped Bar Chart
Sparkline Chart Legend Chart Brush Chart

Britecharts components have been written in ES2016 with a Test Driven methodology, so they are fully tested, and we are committed to keeping them that way.

Key Features

  • Reusability
  • Composability
  • Great design

Usage

The typical use of Britecharts involves creating a chart using its simple API, then rendering it on a container which has previously had data applied to it. The code will look like this:

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

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

API

All the components expose some common API methods like width, height, and margin. Additionally, each chart or component can expose specific methods you can find in the documentation:

Installation

Britecharts components are distributed in UMD modules, each one exposing a D3.js component written with the Reusable API pattern. To use any of the Britecharts modules, you will need to require the chart in your JS file using AMD/CommonJS modules or adding a script tag with the src pointing to the file. You would also need to load the d3-selection submodule to select the chart container.

   npm install britecharts d3-selection

You can also load Britecharts from our CDN as we do in this demo page or play around in our JSBin and CodePen demo projects.

They also provide some minimal CSS styling, that can be loaded independently or as a bundle. Check our Styling Britecharts tutorial to see more options.

See Also

Community Roadmap

This project is in active development. We want your input about what is important, for that, add your votes using the 👍 reaction:

To give your feedback, you can open a new issue. You can also find us in the D3.js slack group, in the #britecharts channel. If you want to help, you can check the contributing guide.

If you work with Angular, check out ngx-britecharts and their demos. We are also preparing a wrapper for React, and we will be talking about it on our twitter.

Acknowledgments

Sun Dai designs Britecharts, and two books inspired the code, Developing a D3.js Edge and Mastering D3.js. It also leveraged a significant number of examples and articles from the D3.js community overall.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind are welcome!

License

Copyright 2019 Eventbrite

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Read more in the license document

Frequently asked questions

Is britecharts free to use?

britecharts is open source under the Apache-2.0 licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does britecharts do?

Composable Charting Library based on reusable D3.js components.

What is britecharts written in?

britecharts is primarily written in TypeScript. Its source is publicly available at https://github.com/britecharts/britecharts, and it has 3,719 GitHub stars.