Britecharts

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

| [![Bar Chart][barchartimg]][barchartdemo] | [![Line Chart][linechartimg]][linechartdemo] | [![Donut Chart][donutchartimg]][donutchartdemo] | | --------------------------------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------- | | [![Stacked Bar Chart][stackedbarchartimg]][stackedbarchartdemo] | [![Stacked Area Chart][stackedareachartlargeimg]][stackedareachartdemo] | [![Grouped Bar Chart][groupedbarchartimg]][groupedbarchartdemo] | | [![Sparkline Chart][sparklinechartimg]][sparklinechartdemo] | [![Legend Chart][legendchartimg]][donutchartdemo] | [![Brush Chart][brushchartimg]][brushchartdemo] |

Britecharts [components][32] 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:

[API][25], [Demo][linechartdemo] Line Chart
[API][22], [Demo][barchartdemo] Bar Chart
[API][21], [Demo][donutchartdemo] Donut Chart
[API][38], [Demo][stackedbarchartdemo] Stacked Bar Chart
[API][40], [Demo][groupedbarchartdemo] Grouped Bar Chart
[API][43], [Demo][bulletchartdemo] Bullet Chart
[API][23], [Demo][brushchartdemo] Brush Chart
[API][41], [Demo][scatterplotdemo] Scatter Plot
[API][29], [Demo][sparklinechartdemo] Sparkline Chart
[API][30], [Demo][stackedareachartdemo] Stacked Area Chart
[API][28], [Demo][stepchartdemo] Step Chart
[API][26], [Demo][barchartdemo] Mini Tooltip
[API][27], [Demo][linechartdemo] Tooltip
[API][24], [Demo][donutchartdemo] Legend

Installation

Britecharts components are distributed in UMD modules, each one exposing a D3.js component written with the [Reusable API pattern][3]. 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][37] submodule to select the chart container.

   npm install britecharts d3-selection

You can also load Britecharts from our [CDN][cdnhome] as we do in this [demo][cdndemo] page or play around in our [JSBin][jsbinsandbox] and [CodePen][codependemos] demo projects.

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

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][d3slack], in the #britecharts channel. If you want to help, you can check the [contributing][35] guide.

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

Acknowledgments

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

<table> <tr> <td align="center"><a href="http://dalerasrorov.github.io/"><img src="https://avatars2.githubusercontent.com/u/9118852?v=4?s=100" width="100px;" alt=""/> Daler Asrorov</a> <a href="https://github.com/britecharts/britecharts/commits?author=DalerAsrorov" title="Code">💻</a> <a href="https://github.com/britecharts/britecharts/commits?author=DalerAsrorov" title="Documentation">📖</a> <a href="#ideas-DalerAsrorov" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-DalerAsrorov" title="Maintenance">🚧</a> <a href="https://github.com/britecharts/britecharts/pulls?q=is%3Apr+reviewed-by%3ADalerAsrorov" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/britecharts/britecharts/commits?author=DalerAsrorov" title="Tests">⚠️</a></td> <td align="center"><a href="https://github.com/ryanwholey"><img src="https://avatars0.githubusercontent.com/u/8100360?v=4?s=100" width="100px;" alt=""/> Ryan Wholey</a> <a href="https://github.com/britecharts/britecharts/commits?author=ryanwholey" title="Code">💻</a> <a href="https://github.com/britecharts/britecharts/commits?author=ryanwholey" title="Documentation">📖</a> <a href="#ideas-ryanwholey" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-ryanwholey" title="Maintenance">🚧</a> <a href="https://github.com/britecharts/britecharts/pulls?q=is%3Apr+reviewed-by%3Aryanwholey" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/britecharts/britecharts/commits?author=ryanwholey" title="Tests">⚠️</a></td> <td align="center"><a href="https://github.com/jchen85"><img src="https://avatars2.githubusercontent.com/u/14088460?v=4?s=100" width="100px;" alt=""/> jchen85</a> <a href="https://github.com/britecharts/britecharts/commits?author=jchen85" title="Code">💻</a> <a href="#ideas-jchen85" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-jchen85" title="Maintenance">🚧</a> <a href="https://github.com/britecharts/britecharts/pulls?q=is%3Apr+reviewed-by%3Ajchen85" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/britecharts/britecharts/commits?author=jchen85" title="Tests">⚠️</a></td> <td align="center"><a href="https://github.com/ImADrafter"><img src="https://avatars3.githubusercontent.com/u/44379989?v=4?s=100" width="100px;" alt=""/> Marcos Gómez</a> <a href="https://github.com/britecharts/britecharts/commits?author=ImADrafter" title="Code">💻</a></td> <td align="center"><a href="https://github.com/ajdani"><img src="https://avatars1.githubusercontent.com/u/16606530?v=4?s=100" width="100px;" alt=""/> ajdani</a> <a href="https://github.com/britecharts/britecharts/issues?q=author%3Aajdani" title="Bug reports">🐛</a> <a href="https://github.com/britecharts/britecharts/commits?author=ajdani" title="Code">💻</a> <a href="#maintenance-ajdani" title="Maintenance">🚧</a></td> <td align="center"><a href="https://github.com/shayh"><img src="https://avatars3.githubusercontent.com/u/366321?v=4?s=100" width="100px;" alt=""/> shayh</a> <a href="https://github.com/britecharts/britecharts/commits?author=shayh" title="Code">💻</a></td> <td align="center"><a href="https://github.com/jayeclark"><img src="https://avatars.githubusercontent.com/u/84106309?v=4?s=100" width="100px;" alt=""/> Jay Clark</a> <a href="https://github.com/britecharts/britecharts/commits?author=jayeclark" title="Code">💻</a></td> </tr> <tr> <td align="center"><a href="https://github.com/bratter"><img src="https://avatars.githubusercontent.com/u/10243813?v=4?s=100" width="100px;" alt=""/> Brendan Ratter</a> <a href="https://github.com/britecharts/britecharts/commits?author=bratter" title="Code">💻</a> <a href="#ideas-bratter" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center"><a href="https://github.com/rajeshmr82"><img src="ht

Britecharts

Install / Use

README

Britecharts

Key Features

Usage

API

Installation

See Also

Community Roadmap

Acknowledgments

Contributors ✨