react-graphy

React Graphy

A react library for rendering graphs, charts and other related things.

React Graph uses Chartjs for rendering charts and graphs and uses their data and options structure. This means there's already tons of documentation and examples on how to use React Graphs

(because its the same contract as Chartjs)

WAIT!!! what about react-d3 or react-chartjs??

Firstly, react D3 solves a different problem and is a much more powerful tool for much more complex problems. react-chartjs does a fine job of wrapping up chartjs but I wanted to extend it with other useable graphs and make it es6/es2015 compatible.

Examples

html

<div id="app"></div>

javascript

import React from 'react';
import ReactDOM from 'react-dom';

import { RG } from 'react-graphy';

const data = {
    // . . .
};

const options = {
    // . . .
};

ReactDOM.render(
    <div>
        <h3>my chart</h3>
        <RG id="donut-chart" data={data} options={options} type="doughnut" />
    </div>,
    document.getElementById('app')
);

Or just use it in your own components

import { RG } from 'react-graphy';

const myComponent = React.createClass({
    render() {
        return (
            <RG id="my-chart" data={data} options={options} type="doughnut" />
        );
    }
});

The repo comes with an example directory which as some sample code. It uses browserify to build a viewable React Graphy example. you'll need to build it with npm run build-example. Then navigate to example/index.html in your browser. (React Graphy's browser support follows that of Chartjs)

Chart types

React Graphs supports the basic 8 Chartjs chart types in addition to some extra rendering. They are:

Charjs chart types

• line coming soon
• bar coming soon
• horizontalBar coming soon
• radar coming soon
• polarArea coming soon
• pie coming soon
• doughnut
• bubble coming soon

Extra types

• ball
• progress

ball types

coming soon

progress types

coming soon