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.
Branch: master
Clone or download
DalerAsrorov and Golodhros Feature - make Stacked Area outlines optional (#679)
<!--- Provide a general summary of your changes in the Title above -->

## Description
<!--- Describe your changes in detail -->
Resolves: #670

## Motivation and Context
<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->
#670

## How Has This Been Tested?
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran to -->
<!--- see how your change affects other areas of the code, etc. -->
Added multiple tests

## Screenshots (if appropriate):
<img width="1025" alt="screen shot 2018-10-21 at 3 23 34 pm" src="https://user-images.githubusercontent.com/9118852/47273288-e1f29a80-d546-11e8-9b8b-5001c29354b4.png">

## Types of changes
<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
- [ ] Refactor (changes the way we code something without changing its functionality)
- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)

## Checklist:
<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
- [x] I have read the **CONTRIBUTING** document.
- [x] My code follows the [code style guide](https://github.com/eventbrite/britecharts/blob/master/CODESTYLEGUIDE.md) of this project.
- [x] I have updated the documentation accordingly.
- [x] I have added tests to cover my changes.
- [x] All new and existing tests passed.
Latest commit 35c8574 Dec 22, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update Contributing doc with Codepen bug template Apr 5, 2018
demos Add a demo page for color palettes (#668) Oct 4, 2018
sandbox Docs - added Scatter plot to sandbox (#619) May 25, 2018
src Feature - make Stacked Area outlines optional (#679) Dec 22, 2018
test Feature - make Stacked Area outlines optional (#679) Dec 22, 2018
.babelrc Rw sandbox (#333) Aug 15, 2017
.codeclimate.yml Fix #336 Donut and Legend bug (#374) Oct 4, 2017
.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.json Added ESlint task to webpack for demos and added critical rules (#497) Jan 30, 2018
.gitignore remove docs from master, push docs to gh-pages branch Dec 4, 2017
.nojekyll Testing github pages conf Jan 31, 2017
.npmignore Make .npmignore a bit more aggressive (#279) May 30, 2017
.sass-lint.yml Using node based SASS to avoid ruby dependency Sep 15, 2016
.travis.yml OPS-17099: Add new NPM Token (#659) Aug 24, 2018
CHANGELOG.md Updating changelog Oct 26, 2018
CODESTYLEGUIDE.md Updating Code styleguide with structure and helpers info (#520) Feb 21, 2018
Dockerfile Added stuff in addition to what Jorge made (#675) Oct 11, 2018
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 Adding Apache License May 13, 2016
Makefile Added stuff in addition to what Jorge made (#675) Oct 11, 2018
README.md Bullet Chart - initial stage (#592) Apr 9, 2018
_HOW_TO_GUIDES.md Adding skeleton for docs reorganization (#392) Oct 16, 2017
_TOPICS.md Adding skeleton for docs reorganization (#392) Oct 16, 2017
_TUTORIALS.md Adding skeleton for docs reorganization (#392) Oct 16, 2017
bower.json Bumped Project to 2.9.8 Oct 26, 2018
karma.conf.js Feature - custom click handler with data point for Grouped Bar (#535) Feb 27, 2018
package.json Bumped Project to 2.9.8 Oct 26, 2018
tests_index.js workign webpack 3 (#379) Oct 10, 2017
webpack.config.js Adding Stacked Area Chart Loading State (#573) Mar 31, 2018
webpack.constants.js Add a demo page for color palettes (#668) Oct 4, 2018
webpack.parts.js Implemented initial draft of Scatter Plot (#560) Mar 21, 2018
yarn.lock Upgrade britecharts to D3 v5.0 (#575) Mar 31, 2018

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 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 Getting Started Guide 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.

License

Copyright 2017 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