Britecharts-react is a React wrapper for the Britecharts charting library. It allows the use of Britecharts charts within a React application. Currently in beta, welcoming contributions! Check out
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Updating issue and PR templates (#114) Feb 12, 2018
__mocks__ Simple jest setup Sep 19, 2017
src Adds formatter to tooltip and donut handlers (#142) Nov 13, 2018
.babelrc switch to commonjs Nov 10, 2017
.codeclimate.yml Adding NPM, travis and codeclimate configuration Sep 29, 2017
.editorconfig Adding eslint, dev server overlay, editorconfig and more Sep 15, 2017
.eslintrc.js Uses update instead of removing and creating again on update (#49) Nov 19, 2017
.gitignore Fix Linechart demos and update docs (#88) Dec 30, 2017
.npmignore Jchen eb stackedareafixes (#34) Nov 3, 2017
.travis.yml Added variables that reference new config tokens (#134) Jun 14, 2018 Bumped Project to 0.4.1 Apr 9, 2018 Add code of conduct (#77) Dec 8, 2017 [Feature] Auto-generated component boilerplate with Plop (#112) Feb 8, 2018
Gruntfile.js Fix test now that styls are inline Jan 9, 2018 Updating package.json and License Sep 19, 2017 Updates loading states (#131) Apr 4, 2018 Uses update instead of removing and creating again on update (#49) Nov 19, 2017
jest.setup.js Rubenmoya: Bar chart (#70) Dec 3, 2017
package.json Update Britecharts dependency version (#138) Oct 29, 2018
plopfile.js [Feat] Step charts and Plop fixes (#113) Feb 12, 2018
styleguide.config.js [Feat] Step charts and Plop fixes (#113) Feb 12, 2018
webpack.config.js Added chart path to webpack and charts/index Mar 3, 2018 Adds esm modules with babel-cli (#97) Jan 10, 2018
yarn.lock Update Britecharts dependency version (#138) Oct 29, 2018

Britecharts React

Britecharts-react is a React wrapper for the Britecharts charting library.

Build Status npm version License PRs Welcome Twitter Follow

Stacked Area Chart Bar Chart Line Chart
Donut Chart Legend Tooltip
Sparkline Chart


Import components from Britecharts-React:

//ES6 import syntax
import { StackedArea } from 'britecharts-react';

//CommonJS require syntax
const { StackedArea } = require('britecharts-react');

Britecharts-React components are used just like any other stateless React component. You will pass in some props and it would render a chart:



Each component's API will be a reflect of Britecharts charts and their APIs. That way, if we need to render a bar chart, we will first check the bar chart's API in the main project API reference page. You can read more about the approach here

From there, we will proceed to pass each of the configurations through the usual props as we do in React projects:


The complete set of components is in progress; the following components are currently implemented and available for use:

The following components are not yet implemented:

  • Brush charts
  • Mini Tooltip
  • Scatter Plot


Britecharts-React is available as an NPM module or through CDN links (in different formats or a bundle).

You can also use individual bundles in UMD format (dist/umd/), CommonJS format (lib/cjs) and tree-shaking enabling ES2015 modules (lib/esm) to add to your bundle. You can see more on our test project.

You would also need to load the stylesheets located in dist/britecharts-react.min.css in order to style the charts properly.

Next steps

We are accepting PRs for creating wrappers for Britecharts components. Check our contributing guide, drop by the #britecharts channel in the d3 slack or just create an issue if you want to know more.


For this project, we have followed the approach called ‘Mapping Lifecycle methods’ based on Nicholas Hery's article. We want to recognize all the contributors in the parent project Britecharts.

See Also


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

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