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

Downloads in past


0.6.53 years ago7 years agoMinified + gzip package size for britecharts-react in KB


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

Build Status npm version License PRs Welcome All Contributors Twitter Follow
| Stacked Area Chart | Bar Chart | Line Chart | | ------------- | ------------- | ------------- | | Donut Chart | Legend | Tooltip | | Sparkline Chart |


Import components from Britecharts-React:
```js static //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:

```js static


Each component's API will be a reflection of Britechartsbritecharts charts and their APIs. That way, if we need to render a bar chart, we will first check the bar chart's APIbarChartAPI in the main project API reference page. You can read more about the approach heretopics
From there, we will proceed to pass each of the configurations through the usual props as we do in React projects: ```js static data={barData.with2Entries()} width={400} isHorizontal={true} margin={marginObject}

The complete set of components is in progress; the following components are currently implemented and available for use:
The following components haven't been migrated yet from Britecharts:
  • Brush charts
  • Heatmaps
  • Mini Tooltips
  • Scatter Plots

If you need to use one of the missing charts, check out our how-to guide for creating new chartshowtoCreate.


Britecharts-React is available as an NPM modulenpmModule or through CDN links (in different formatsjsDelivrLib or a bundlejsDelivrDist).
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 projecttestProject.
Developers also need to load the stylesheets located in dist/britecharts-react.min.css to style the charts correctly.

Next steps

We are accepting PRs for creating wrappers for Britecharts components. Check our contributing guidecontributingGuide, drop by the #britecharts channel in the d3 slackd3Slack, or 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 articleintegration-article. We want to recognize all the contributors in the parent project Britechartsbritecharts.

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 documentlicenseGithub.


Thanks goes to these wonderful people (emoji key):
David Gómez
David Gómez

💻 🤔 🚧 👀

This project follows the all-contributors specification. Contributions of any kind welcome!