Grafu Charts

A React component library for building data visualizations. Leverages Material UI for styled components, and Recharts for base visualization components.

A product of the SimonComputing Technology Innovations Lab

Installation

# Use NPM, yarn, or PNPM
npm install @simoncomputing/grafu-base
npm install @simoncomputing/grafu-charts

Required Peer Dependencies

The charts and graphs are built on Recharts. At a minimum, this library requires installing these packages:

# Material UI
npm install @mui/material@^6.5.0
npm install @mui/icons-material@^6.5.0
npm install @emotion/react@^11.14.0
npm install @emotion/styled@^11.14.0

# Data visualizations
npm install recharts@^2.15.2

Basic Example

<BarGraph
    data={[
        { value: 1, category: 'A' },
        { value: 2, category: 'B' }
    ]}
    valueAxis={{ keys: ['value'] }}
    categoryAxis={{ key: 'category' }}
/>

Documentation & Demo

This project uses Storybook to document and demonstrate the components. URL COMING SOON.

Release History

Details for every release are documented in CHANGELOG.md

Exports

Components include:

1. Area Graph
2. Bar Graph
3. Bubble Graph
4. Calendar Heat Map
5. Composite Graph (Bar + Line Graph)
6. Data Table (Deprecated)
7. Gauge Chart
8. Line Graph
9. Mirror Graph
10. Pie Chart
11. Radar Chart
12. Sankey Chart
13. Survey Explorer