Skip to content
Client-side reusable Charting Library based on D3.js v5 that allows easy and intuitive use of charts and components that can be composed together creating amazing visualizations.
JavaScript HTML CSS Other
Branch: master
Clone or download
shayh and Golodhros Clear tooltip cache before path is redrawn (#759)
- before if the path was updated, the tooltip point would be placed
  in the wrong location according to the cache.
Latest commit 89b517e Sep 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Cleaning old templates May 29, 2019
demos Fix grouped bar import typo (#752) Aug 7, 2019
sandbox bable update (7.5.0) + sandbox (#753) Aug 12, 2019
src Clear tooltip cache before path is redrawn (#759) Sep 10, 2019
stats/testCoverage Updates Webpack to version 4 (#740) Jul 11, 2019
test Fix grouped bar import typo (#752) Aug 7, 2019
.all-contributorsrc docs: add jchen85 as a contributor (#730) Jun 2, 2019
.codeclimate.yml Adding concurrently and cleaning old release scripts (#717) May 15, 2019
.dockerignore Added stuff in addition to what Jorge made (#675) Oct 11, 2018
.editorconfig Using generator info to setup repo. Added dependencies and wired jasm… May 25, 2015
.eslintrc-babel.json Updating linting files Apr 7, 2017
.eslintrc.js Adding concurrently and cleaning old release scripts (#717) May 15, 2019
.gitignore bable update (7.5.0) + sandbox (#753) Aug 12, 2019
.nojekyll Testing github pages conf Jan 31, 2017
.npmignore Updates Webpack to version 4 (#740) Jul 11, 2019
.sass-lint.yml Using node based SASS to avoid ruby dependency Sep 15, 2016
.travis.yml Updating GitHub token May 28, 2019
CHANGELOG.md Bumped Project to 2.12.0 Jun 7, 2019
Dockerfile Update Britecharts Node to 12.2.0 (#715) May 13, 2019
GETTINGSTARTED.md Mi readme update nov (#434) Nov 27, 2017
Gruntfile.js Updating package, npmignore, readme and cleaning old index.html file Feb 10, 2017
LICENSE.md New Documentation Tutorials and tweaks (#704) Apr 6, 2019
Makefile Added stuff in addition to what Jorge made (#675) Oct 11, 2018
README.md Refactoring donut and brush chart tests (#729) Jun 3, 2019
all-contributorsrc.json Updates the Sandbox (#719) May 18, 2019
karma.conf.js Refactor project into ES2015 modules (#750) Aug 7, 2019
package.json bable update (7.5.0) + sandbox (#753) Aug 12, 2019
tests_index.js Refactor project into ES2015 modules (#750) Aug 7, 2019
webpack.config.js bable update (7.5.0) + sandbox (#753) Aug 12, 2019
webpack.constants.js Updates Webpack to version 4 (#740) Jul 11, 2019
webpack.parts.js Refactor project into ES2015 modules (#750) Aug 7, 2019
yarn.lock bable update (7.5.0) + sandbox (#753) Aug 12, 2019

README.md

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.

Build Status 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

Roadmap

This project is in active development. You can check our plans for the next release to see what's coming, and vote for your favorite proposals on the issues page.

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):

Daler Asrorov
Daler Asrorov

💻 📖 🤔 🚧 👀 ⚠️
Ryan Wholey
Ryan Wholey

💻 📖 🤔 🚧 👀 ⚠️
jchen85
jchen85

💻 🤔 🚧 👀 ⚠️

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

You can’t perform that action at this time.