Britecharts-react is a React wrapper for the Britecharts charting library
npm install 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
width={600}
height={400}
/>
`
From there, we will proceed to pass each of the configurations through the usual props as we do in React projects:
`js static`
width={400}
isHorizontal={true}
margin={marginObject}
>
The complete set of components is in progress; the following components are currently implemented and available for use:
- Bar charts [(API)][barChartAPI]
- Bullet charts [(API)][bulletAPI]
- Grouped Bar charts [(API)][groupedBarChartAPI]
- Donut charts [(API)][donutChartAPI]
- Line charts [(API)][lineChartAPI]
- Sparkline charts [(API)][sparklineChartAPI]
- Stacked Area charts [(API)][stackedAreaChartAPI]
- Stacked Bar charts [(API)][stackedBarChartAPI]
- Tooltips [(API)][tooltipAPI]
- Step charts [(API)][stepChartAPI]
- Legends [(API)][legendAPI]
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 charts][howtoCreate].
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][testProject].
Developers also need to load the stylesheets located in dist/britecharts-react.min.css` to style the charts correctly.
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][license]
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][licenseGithub].
[britecharts]: https://github.com/britecharts/britecharts
Thanks goes to these wonderful people (emoji key):
David Gómez 💻 🤔 🚧 👀 |
This project follows the all-contributors specification. Contributions of any kind welcome!
[react]: https://facebook.github.io/react/
[integration-article]: http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/
[barChartAPI]: http://britecharts.github.io/britecharts/module-Bar.html
[groupedBarChartAPI]: http://britecharts.github.io/britecharts/module-Grouped-Bar.html
[donutChartAPI]: http://britecharts.github.io/britecharts/module-Donut.html
[lineChartAPI]: http://britecharts.github.io/britecharts/module-Line.html
[sparklineChartAPI]: http://britecharts.github.io/britecharts/module-Sparkline.html
[stackedAreaChartAPI]: http://britecharts.github.io/britecharts/module-Stacked-area.html
[stackedBarChartAPI]: http://britecharts.github.io/britecharts/module-Stacked-bar.html
[tooltipAPI]: http://britecharts.github.io/britecharts/module-Tooltip.html
[stepChartAPI]: http://britecharts.github.io/britecharts/module-Step.html
[legendAPI]: http://britecharts.github.io/britecharts/module-Legend.html
[bulletAPI]: http://britecharts.github.io/britecharts/module-Bullet.html
[license]: https://www.apache.org/licenses/LICENSE-2.0
[licenseGithub]: https://github.com/britecharts/britecharts-react/blob/master/LICENSE.md
[topics]: https://github.com/britecharts/britecharts-react/blob/master/TOPICS.md
[jsDelivrLib]: https://cdn.jsdelivr.net/npm/britecharts-react@latest/lib/
[jsDelivrDist]: https://cdn.jsdelivr.net/npm/britecharts-react@latest/dist/
[npmModule]: https://www.npmjs.com/package/britecharts-react
[contributingGuide]: https://github.com/britecharts/britecharts-react/blob/master/CONTRIBUTING.md
[d3Slack]: https://d3js.slack.com/
[codeOfConduct]: https://github.com/britecharts/britecharts-react/blob/master/CODE_OF_CONDUCT.md
[homepage]: https://britecharts.github.io/britecharts-react/
[testProject]: https://github.com/Golodhros/britecharts-react-test-project
[howtoCreate]: https://github.com/britecharts/britecharts-react/blob/master/CONTRIBUTING.md#creating-a-new-chart