{"id":18307921,"url":"https://github.com/froala/react-froalacharts-component","last_synced_at":"2025-04-09T11:25:19.122Z","repository":{"id":56432926,"uuid":"290977781","full_name":"froala/react-froalacharts-component","owner":"froala","description":"Simple and lightweight official React component for FroalaCharts.","archived":false,"fork":false,"pushed_at":"2020-11-08T09:22:36.000Z","size":97,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-15T05:24:56.083Z","etag":null,"topics":["charts","froalacharts","froalacharts-component"],"latest_commit_sha":null,"homepage":"https://froala.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/froala.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-28T07:15:17.000Z","updated_at":"2020-11-08T09:52:32.000Z","dependencies_parsed_at":"2022-08-15T18:40:15.842Z","dependency_job_id":null,"html_url":"https://github.com/froala/react-froalacharts-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Freact-froalacharts-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Freact-froalacharts-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Freact-froalacharts-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Freact-froalacharts-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/froala","download_url":"https://codeload.github.com/froala/react-froalacharts-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248029216,"owners_count":21035961,"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":["charts","froalacharts","froalacharts-component"],"created_at":"2024-11-05T16:05:54.656Z","updated_at":"2025-04-09T11:25:19.079Z","avatar_url":"https://github.com/froala.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Simple and lightweight official React component for FroalaCharts. `react-froalacharts` enables you to add JavaScript charts in your React application or project without any hassle.\n\n\n- Github Repo: [https://github.com/froala/react-froalacharts-component](https://github.com/froala/react-froalacharts-component)\n- Documentation: [https://froala.com/charts/docs/frameworks/react/](https://froala.com/charts/docs/frameworks/react/)\n- Support: [support@froala.com](support@froala.com)\n- FroalaCharts\n  - Official Website: [https://www.froala.com/](https://www.froala.com/)\n  - Official NPM Package: [https://www.npmjs.com/package/froalacharts](https://www.npmjs.com/package/froalacharts)\n- Issues: [https://github.com/froala/react-froalacharts-component/issues](https://github.com/froala/react-froalacharts-component/issues)\n\n---\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n  - [Requirements](#requirements)\n  - [Installation](#installation)\n  - [Usage](#usage)\n- [Quick Start](#quick-start)\n- [For Contributors](#for-contributors)\n- [Licensing](#licensing)\n\n## Getting Started\n\n### Requirements\n\n- **Node.js**, **NPM/Yarn** installed globally in your OS.\n- **FroalaCharts** and **React** installed in your project, as detailed below:\n\n### Installation\n\nThere are multiple ways to install `react-froalacharts` component.\n\n**Direct Download**\nAll binaries are located on our [github repository](https://github.com/froala/react-froalacharts-component).\n\n**Install from NPM**\n\n```\nnpm install --save react-froalacharts\n```\n\nSee [npm documentation](https://docs.npmjs.com/) to know more about npm usage.\n\n**Install from Yarn**\n\n```\nyarn add react-froalacharts\n```\n\nSee [yarn documentation](https://yarnpkg.com/en/docs) to know more about yarn usage.\n\nFor general instructions, refer to this [developer docs page](https://froala.com/charts/docs/frameworks/react/).\n\n### Usage\n\n#### If you have created your app using `create-react-app`\n\nImport React, `react-froalacharts` and FroalaCharts in your app:\n\n```\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport FroalaCharts from 'froalacharts';\nimport ReactFC from 'react-froalacharts';\n\nReactFC.fcRoot(FroalaCharts);\n```\n\n#### If you have created your app using tools like `webpack` or `parcel`\n\nImport React, `react-froalacharts` and FroalaCharts in your app:\n\n```\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport FroalaCharts from 'froalacharts/core';\nimport ReactFC from 'react-froalacharts';\n\nReactFC.fcRoot(FroalaCharts);\n```\n\nNote: This way of import will not work in IE11 and below.\n\n## Quick Start\n\nHere is a basic sample that shows how to create a chart using `react-froalacharts`:\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport FroalaCharts from 'froalacharts';\nimport CandyTheme from 'froalacharts/themes/froalacharts.theme.candy';\nimport ReactFC from 'react-froalacharts';\n\nReactFC.fcRoot(FroalaCharts, CandyTheme);\n\nconst dataSource = {\n  chart: {\n    caption: 'Countries With Most Oil Reserves [2017-18]',\n    subCaption: 'In MMbbl = One Million barrels',\n    xAxisName: 'Country',\n    yAxisName: 'Reserves (MMbbl)',\n    numberSuffix: 'K',\n    theme: 'candy'\n  },\n  data: [\n    { label: 'Venezuela', value: '290' },\n    { label: 'Saudi', value: '260' },\n    { label: 'Canada', value: '180' },\n    { label: 'Iran', value: '140' },\n    { label: 'Russia', value: '115' },\n    { label: 'UAE', value: '100' },\n    { label: 'US', value: '30' },\n    { label: 'China', value: '30' }\n  ]\n};\n\nconst chartConfigs = {\n  type: 'pie',\n  width: 600,\n  height: 400,\n  dataFormat: 'json',\n  dataSource: dataSource\n};\n\nReactDOM.render(\u003cReactFC {...chartConfigs} /\u003e, document.getElementById('root'));\n```\n\nlinks to help you get started:\n\n- [Documentation](https://froala.com/charts/docs/frameworks/react/)\n- [Chart gallery](https://froala.com/charts/tour/)\n- [FroalaCharts API](https://froala.com/charts/docs/api/options/#FroalaCharts.options)\n\n## For Contributors\n\n- Clone the repository and install dependencies\n\n```\n$ git clone https://github.com/froala/react-froalacharts-component.git\n$ cd react-froalacharts-component\n$ npm i\n$ npm start\n```\n\n- Run `npm run build` to start the dev server and point your browser at [http://localhost:3000/](http://localhost:3000/).\n\n## Licensing\n\nThe FroalaCharts React component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FroalaCharts library in your page separately, which has a [separate license](https://www.ideracorp.com/Legal/Froala/FroalaChartsLicenseAgreement).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroala%2Freact-froalacharts-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffroala%2Freact-froalacharts-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroala%2Freact-froalacharts-component/lists"}