Newlyweds Proposing Marriage
    Wondering what’s next for npm?Check out our public roadmap! »

    react-froalacharts
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    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.


    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

    If you have created your app using create-react-app

    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);
    

    If you have created your app using tools like webpack or parcel

    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
    

    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.

    Install

    npm i react-froalacharts

    DownloadsWeekly Downloads

    14

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    203 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar