{"id":13565526,"url":"https://github.com/britecharts/britecharts-react","last_synced_at":"2025-04-06T09:10:54.842Z","repository":{"id":39778087,"uuid":"100057683","full_name":"britecharts/britecharts-react","owner":"britecharts","description":"Britecharts-react is a React wrapper for the Britecharts charting library. It allows the use of Britecharts charts within a React application.","archived":false,"fork":false,"pushed_at":"2023-12-15T02:56:08.000Z","size":10525,"stargazers_count":113,"open_issues_count":15,"forks_count":22,"subscribers_count":96,"default_branch":"master","last_synced_at":"2024-05-19T15:03:15.674Z","etag":null,"topics":["britecharts","chart","d3","data-visualization","es6","interactive-visualizations","javascript","react"],"latest_commit_sha":null,"homepage":"http://britecharts.github.io/britecharts-react/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/britecharts.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":"britecharts","open_collective":"britechartsorg","custom":"https://www.buymeacoffee.com/britecharts"}},"created_at":"2017-08-11T17:53:12.000Z","updated_at":"2023-12-19T17:40:48.000Z","dependencies_parsed_at":"2023-12-24T08:05:31.390Z","dependency_job_id":"2034f951-3b53-4b6e-a275-64c485ddd5a7","html_url":"https://github.com/britecharts/britecharts-react","commit_stats":{"total_commits":346,"total_committers":21,"mean_commits":"16.476190476190474","dds":0.5953757225433526,"last_synced_commit":"6dedb514d272c3ee53c095f5710fb92f10c0f3a8"},"previous_names":[],"tags_count":73,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/britecharts%2Fbritecharts-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/britecharts%2Fbritecharts-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/britecharts%2Fbritecharts-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/britecharts%2Fbritecharts-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/britecharts","download_url":"https://codeload.github.com/britecharts/britecharts-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247457803,"owners_count":20941906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["britecharts","chart","d3","data-visualization","es6","interactive-visualizations","javascript","react"],"created_at":"2024-08-01T13:01:49.297Z","updated_at":"2025-04-06T09:10:54.815Z","avatar_url":"https://github.com/britecharts.png","language":"JavaScript","readme":"# Britecharts React\n\u003e Britecharts-react is a [React][react] wrapper for the [Britecharts][britecharts] charting library.\n\n[![Build Status](https://travis-ci.org/britecharts/britecharts-react.svg?branch=master)](https://travis-ci.org/britecharts/britecharts-react)\n[![npm version](https://badge.fury.io/js/britecharts-react.svg)](https://badge.fury.io/js/britecharts-react)\n[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/britecharts/britecharts-react/blob/master/CONTRIBUTING.md)\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n[![Twitter Follow](https://img.shields.io/twitter/follow/britecharts.svg?style=social\u0026label=Follow)](https://twitter.com/Britecharts/followers)\n\n\n| [![Stacked Area Chart](https://raw.githubusercontent.com/britecharts/britecharts-react/master/src/docs/images/thumbnails/stacked-area.png)](https://britecharts.github.io/britecharts-react/#stackedarea) | [![Bar Chart](https://raw.githubusercontent.com/britecharts/britecharts-react/master/src/docs/images/thumbnails/bar-chart.png)](https://britecharts.github.io/britecharts-react/#bar) | [![Line Chart](https://raw.githubusercontent.com/britecharts/britecharts-react/master/src/docs/images/thumbnails/line-chart.png)](https://britecharts.github.io/britecharts-react/#line) |\n| ------------- | ------------- | ------------- |\n| [![Donut Chart](https://raw.githubusercontent.com/britecharts/britecharts-react/master/src/docs/images/thumbnails/donut-chart.png)](https://britecharts.github.io/britecharts-react/#donut) | [![Legend](https://raw.githubusercontent.com/britecharts/britecharts-react/master/src/docs/images/thumbnails/legend.png)](https://britecharts.github.io/britecharts-react/#legend) | [![Tooltip](https://raw.githubusercontent.com/britecharts/britecharts-react/master/src/docs/images/thumbnails/legend.png)](https://britecharts.github.io/britecharts-react/#tooltip) |\n| [![Sparkline Chart](https://raw.githubusercontent.com/britecharts/britecharts-react/master/src/docs/images/thumbnails/sparkline.png)](https://britecharts.github.io/britecharts-react/#sparkline) |\n\n## Usage\nImport components from Britecharts-React:\n\n```js static\n//ES6 import syntax\nimport { StackedArea } from 'britecharts-react';\n\n//CommonJS require syntax\nconst { StackedArea } = require('britecharts-react');\n```\n\nBritecharts-React components are used just like any other stateless React component. You will pass in some props, and it would render a chart:\n\n```js static\n\u003cStackedArea\n    data={stackedAreaData.with2Sources()}\n    width={600}\n    height={400}\n/\u003e\n\n```\n\n## API\nEach component's API will be a reflection of [Britecharts][britecharts] charts and their APIs. That way, if we need to render a bar chart, we will first check the [bar chart's API][barChartAPI] in the main project API reference page. You can read more about the approach [here][topics]\n\nFrom there, we will proceed to pass each of the configurations through the usual props as we do in React projects:\n```js static\n\u003cBar\n    data={barData.with2Entries()}\n    width={400}\n    isHorizontal={true}\n    margin={marginObject}\n\u003e\n```\n\nThe complete set of components is in progress; the following components are currently implemented and available for use:\n- Bar charts [(API)][barChartAPI]\n- Bullet charts [(API)][bulletAPI]\n- Grouped Bar charts [(API)][groupedBarChartAPI]\n- Donut charts [(API)][donutChartAPI]\n- Line charts [(API)][lineChartAPI]\n- Sparkline charts [(API)][sparklineChartAPI]\n- Stacked Area charts [(API)][stackedAreaChartAPI]\n- Stacked Bar charts [(API)][stackedBarChartAPI]\n- Tooltips [(API)][tooltipAPI]\n- Step charts [(API)][stepChartAPI]\n- Legends [(API)][legendAPI]\n\nThe following components haven't been migrated yet from Britecharts:\n- Brush charts\n- Heatmaps\n- Mini Tooltips\n- Scatter Plots\n\nIf you need to use one of the missing charts, check out our [how-to guide for creating new charts][howtoCreate].\n\n## Installation\nBritecharts-React is available as an [NPM module][npmModule] or through CDN links (in [different formats][jsDelivrLib] or a [bundle][jsDelivrDist]).\n\nYou 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].\n\nDevelopers also need to load the stylesheets located in `dist/britecharts-react.min.css` to style the charts correctly.\n\n## Next steps\nWe are accepting PRs for creating wrappers for Britecharts components. Check our [contributing guide][contributingGuide], drop by the #britecharts channel in the [d3 slack][d3Slack], or create an issue if you want to know more.\n\n\n## Acknowledgments\nFor this project, we have followed the approach called ‘Mapping Lifecycle methods’ based on [Nicholas Hery's article][integration-article]. We want to recognize all the contributors in the parent project [Britecharts][britecharts].\n\n\n## See Also\n- [Documentation Homepage][homepage]\n- [Contributing Guide][contributingGuide]\n- [Code of Conduct][codeOfConduct]\n\n## License\nCopyright 2017 Eventbrite\n\nLicensed under the Apache License, Version 2.0 (the “License”);\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n[https://www.apache.org/licenses/LICENSE-2.0][license]\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an “AS IS” BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\nRead more in the [license document][licenseGithub].\n\n[britecharts]: https://github.com/britecharts/britecharts\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\u003ctr\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"http://davidgomez.dev\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/282903?v=4\" width=\"100px;\" alt=\"David Gómez\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDavid Gómez\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/britecharts/britecharts-react/commits?author=davegomez\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-davegomez\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"#maintenance-davegomez\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"#review-davegomez\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n[react]: https://facebook.github.io/react/\n[integration-article]: http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/\n\n[barChartAPI]: http://britecharts.github.io/britecharts/module-Bar.html\n[groupedBarChartAPI]: http://britecharts.github.io/britecharts/module-Grouped-Bar.html\n[donutChartAPI]: http://britecharts.github.io/britecharts/module-Donut.html\n[lineChartAPI]: http://britecharts.github.io/britecharts/module-Line.html\n[sparklineChartAPI]: http://britecharts.github.io/britecharts/module-Sparkline.html\n[stackedAreaChartAPI]: http://britecharts.github.io/britecharts/module-Stacked-area.html\n[stackedBarChartAPI]: http://britecharts.github.io/britecharts/module-Stacked-bar.html\n[tooltipAPI]: http://britecharts.github.io/britecharts/module-Tooltip.html\n[stepChartAPI]: http://britecharts.github.io/britecharts/module-Step.html\n[legendAPI]: http://britecharts.github.io/britecharts/module-Legend.html\n[bulletAPI]: http://britecharts.github.io/britecharts/module-Bullet.html\n\n\n[license]: https://www.apache.org/licenses/LICENSE-2.0\n[licenseGithub]: https://github.com/britecharts/britecharts-react/blob/master/LICENSE.md\n[topics]: https://github.com/britecharts/britecharts-react/blob/master/TOPICS.md\n[jsDelivrLib]: https://cdn.jsdelivr.net/npm/britecharts-react@latest/lib/\n[jsDelivrDist]: https://cdn.jsdelivr.net/npm/britecharts-react@latest/dist/\n[npmModule]: https://www.npmjs.com/package/britecharts-react\n[contributingGuide]: https://github.com/britecharts/britecharts-react/blob/master/CONTRIBUTING.md\n[d3Slack]: https://d3js.slack.com/\n[codeOfConduct]: https://github.com/britecharts/britecharts-react/blob/master/CODE_OF_CONDUCT.md\n[homepage]: https://britecharts.github.io/britecharts-react/\n[testProject]: https://github.com/Golodhros/britecharts-react-test-project\n[howtoCreate]: https://github.com/britecharts/britecharts-react/blob/master/CONTRIBUTING.md#creating-a-new-chart\n","funding_links":["https://github.com/sponsors/britecharts","https://opencollective.com/britechartsorg","https://www.buymeacoffee.com/britecharts"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbritecharts%2Fbritecharts-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbritecharts%2Fbritecharts-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbritecharts%2Fbritecharts-react/lists"}