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.
- Github Repo: https://github.com/froala/react-froalacharts-component
- Documentation: https://froala.com/charts/docs/frameworks/react/
- Support: support@froala.com
- FroalaCharts
- Official Website: https://www.froala.com/
- Official NPM Package: https://www.npmjs.com/package/froalacharts
- Issues: https://github.com/froala/react-froalacharts-component/issues
Table of Contents
Getting Started
Requirements
- Node.js, NPM/Yarn installed globally in your OS.
- FroalaCharts and React installed in your project, as detailed below:
Installation
There are multiple ways to install react-froalacharts
component.
Direct Download All binaries are located on our github repository.
Install from NPM
npm install --save react-froalacharts
See npm documentation to know more about npm usage.
Install from Yarn
yarn add react-froalacharts
See yarn documentation to know more about yarn usage.
For general instructions, refer to this developer docs page.
Usage
create-react-app
If you have created your app using Import React, react-froalacharts
and FroalaCharts in your app:
import React from 'react';
import ReactDOM from 'react-dom';
import FroalaCharts from 'froalacharts';
import ReactFC from 'react-froalacharts';
ReactFC.fcRoot(FroalaCharts);
webpack
or parcel
If you have created your app using tools like Import React, react-froalacharts
and FroalaCharts in your app:
import React from 'react';
import ReactDOM from 'react-dom';
import FroalaCharts from 'froalacharts/core';
import ReactFC from 'react-froalacharts';
ReactFC.fcRoot(FroalaCharts);
Note: This way of import will not work in IE11 and below.
Quick Start
Here is a basic sample that shows how to create a chart using react-froalacharts
:
import React from 'react';
import ReactDOM from 'react-dom';
import FroalaCharts from 'froalacharts';
import CandyTheme from 'froalacharts/themes/froalacharts.theme.candy';
import ReactFC from 'react-froalacharts';
ReactFC.fcRoot(FroalaCharts, CandyTheme);
const dataSource = {
chart: {
caption: 'Countries With Most Oil Reserves [2017-18]',
subCaption: 'In MMbbl = One Million barrels',
xAxisName: 'Country',
yAxisName: 'Reserves (MMbbl)',
numberSuffix: 'K',
theme: 'candy'
},
data: [
{ label: 'Venezuela', value: '290' },
{ label: 'Saudi', value: '260' },
{ label: 'Canada', value: '180' },
{ label: 'Iran', value: '140' },
{ label: 'Russia', value: '115' },
{ label: 'UAE', value: '100' },
{ label: 'US', value: '30' },
{ label: 'China', value: '30' }
]
};
const chartConfigs = {
type: 'pie',
width: 600,
height: 400,
dataFormat: 'json',
dataSource: dataSource
};
ReactDOM.render(<ReactFC {...chartConfigs} />, document.getElementById('root'));
links to help you get started:
For Contributors
- Clone the repository and install dependencies
$ git clone https://github.com/froala/react-froalacharts-component.git
$ cd react-froalacharts-component
$ npm i
$ npm start
- Run
npm run build
to start the dev server and point your browser at http://localhost:3000/.
Licensing
The 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.