reaviz

πŸ“Š Data visualization library for React

Showing:

Popularity

Downloads/wk

1.7K

GitHub Stars

507

Maintenance

Last Commit

3mos ago

Contributors

8

Package

Dependencies

26

License

Apache-2.0

Type Definitions

Built-In

Tree-Shakeable

Yes?

Reviews

Average Rating

4.7/53
Read All Reviews
happycoder0011

Top Feedback

4Easy to Use
3Great Documentation
3Highly Customizable
1Performant
1Hard to Use
1Slow

Readme


Data visualization library for React

Open Collective backers and sponsors


REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability.

If you are looking for node-based graphs, checkout reaflow.

✨ Features

Chart types include:

  • Bar Chart
    • Single Series Vertical / Horizontal
    • Multi Series Vertical / Horizontal
    • Stacked Vertical / Horizontal
    • Stacked Normalized Vertical / Horizontal
    • Stacked Diverging Vertical / Horizontal
    • Marimekko
    • Radial
    • Sparkline
    • Waterfall
  • Line Chart
    • Single Series
    • Multi Series
    • Stacked
    • Stacked Normalized
    • Radial
    • Sparklines
  • Area Chart
    • Single Series
    • Multi Series
    • Stacked
    • Stacked Normalized
    • Radial
    • Sparklines
  • Scatter Chart
    • Linear
    • Radial
  • Pie Chart
    • Standard
    • Exploded
    • Donut Chart
  • Sankey chart
  • Hive Plot
  • Gauge
    • Radial
    • Linear
    • Stacked Radial
  • Map Chart
  • Heatmap
    • Standard
    • Year Calendar
    • Month Calendar
  • Venn Diagram
    • Standard
    • Euler
    • Fixed Euler
  • Bubble Chart
  • Treemap

Additional features:

  • Legend
    • Discrete
    • Sequential
  • Axis
    • Linear
    • Radial
    • Advanced Label Positioning
  • Gestures
    • Pinch
    • Pan
    • Zoom
    • Move
  • Tooltip
    • Single Value
    • Grouped Values
  • Line/Area Series Symbols
  • Animations Enter/Update/Exit
  • Brush
  • Patterns
  • Gradients
  • Grid Lines
  • Mark Lines
  • BigInt Support
  • Auto Sizing
  • Bar Guidelines
  • Range Lines
  • SSR

πŸ“¦ Install

To use reaviz in your project, install it via npm/yarn:

npm i reaviz --save

then import a chart type into your JSX element:

import { BarChart } from 'reaviz';

const data = [
  { key: 'IDS', data: 14 },
  { key: 'Malware', data: 5 },
  { key: 'DLP', data: 18 }
];

const App = () => <BarChart width={350} height={250} data={data} />;

Checkout this demo live or visit the demos page to learn more!

πŸ”­ Development

If you want to run REAVIZ locally, its super easy!

  • Clone the repository
  • yarn install
  • yarn start
  • Browser opens to Storybook page

❀️ Contributors

Thanks to all our contributors!

Rate & Review

Great Documentation3
Easy to Use4
Performant1
Highly Customizable3
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use1
Slow1
Buggy1
Abandoned0
Unwelcoming Community1
100
happycoder001126 Ratings38 Reviews
Curious | Learner | Love to code
December 30, 2020
Easy to Use
Great Documentation
Performant
Highly Customizable

Quite efficient and helpful with charts consisting of editable data in realtime. Was looking for something that looks good and handles data properly and it seems pretty good. Will definitely be making more projects around it. It is interactive, customizable and great documentation to get started with.


0
Kyle Kalwarski9 Ratings0 Reviews
1 year ago
Easy to Use
hungtpVietNam29 Ratings0 Reviews
November 25, 2020
Easy to Use
Great Documentation
Highly Customizable
AustinWest Palm Beach, FL2 Ratings1 Review
Crafter of Software β€’ Lover of JavaScript & Goldendoodles
July 21, 2020
Great Documentation
Easy to Use
Highly Customizable
Akbar KhanBlackburn1 Rating0 Reviews
June 19, 2020
Unwelcoming Community
Buggy
Hard to Use
Slow

Alternatives

rc
react-calendarUltimate calendar for your React app.
User Rating
4.5/ 5
17
Top Feedback
20Great Documentation
20Easy to Use
12Highly Customizable
GitHub Stars
2K
Weekly Downloads
245K
rbc
react-big-calendargcal/outlook like calendar component
User Rating
4.3/ 5
10
Top Feedback
13Great Documentation
3Easy to Use
2Performant
GitHub Stars
5K
Weekly Downloads
158K
@fullcalendar/reactAn official React component for FullCalendar
User Rating
4.3/ 5
3
Top Feedback
2Great Documentation
2Performant
1Easy to Use
GitHub Stars
1K
Weekly Downloads
100K
rmc
react-modern-calendar-datepickerA modern, beautiful, customizable date picker for React
User Rating
5.0/ 5
1
Top Feedback
1Great Documentation
1Easy to Use
1Bleeding Edge
GitHub Stars
738
Weekly Downloads
14K
react-calendar-timelineA modern and responsive react timeline component.
User Rating
3.4/ 5
5
Top Feedback
3Abandoned
2Poor Documentation
GitHub Stars
1K
Weekly Downloads
21K
See 39 Alternatives