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.
See Also
- [Documentation Homepage][31]
- [Getting Started Guide][gettingstarted]
- [Tutorials][tutorialsindex]
- [How To Guides][howtoindex]
- [About Britecharts][topicsindex]
- [Contributing Guide][35]
- [Github Repo][33]
- [Bar Chart Tutorial][screencast][Video]
- [Release Notes][13]
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):
