react-vis

Data Visualization Components

Showing:

Popularity

Downloads/wk

72.5K

GitHub Stars

8K

Maintenance

Last Commit

1yr ago

Contributors

136

Package

Dependencies

18

Size (min+gzip)

82.5KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Reviews

Average Rating

4.7/53
Read All Reviews
preveenraj

Top Feedback

2Great Documentation
2Easy to Use
2Highly Customizable

Readme

version build build downloads

react-vis | Demos | Docs

A COMPOSABLE VISUALIZATION SYSTEM

demo

Overview

A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, hexagon heatmaps, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.

Some notable features:

  • Simplicity. react-vis doesn't require any deep knowledge of data visualization libraries to start building your first visualizations.
  • Flexibility. react-vis provides a set of basic building blocks for different charts. For instance, separate X and Y axis components. This provides a high level of control of chart layout for applications that need it.
  • Ease of use. The library provides a set of defaults which can be overridden by the custom user's settings.
  • Integration with React. react-vis supports the React's lifecycle and doesn't create unnecessary nodes.

Usage

Install react-vis via npm.

npm install react-vis --save

Include the built main CSS file in your HTML page or via SASS:

@import "~react-vis/dist/style";

You can also select only the styles you want to use. This helps minimize the size of the outputted CSS. Here's an example of importing only the legends styles:

@import "~react-vis/dist/styles/legends";

Import the necessary components from the library...

import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';

… and add the following code to your render function:

<XYPlot
  width={300}
  height={300}>
  <HorizontalGridLines />
  <LineSeries
    data={[
      {x: 1, y: 10},
      {x: 2, y: 5},
      {x: 3, y: 15}
    ]}/>
  <XAxis />
  <YAxis />
</XYPlot>

If you're working in a non-node environment, you can also directly include the bundle and compiled style using basic html tags.

<link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css">
<script type="text/javascript" src="https://unpkg.com/react-vis/dist/dist.min.js"></script>

The global reactVis object will now be available for you to play around.

You can checkout these example CodePens: #1, #2, #3 or #4

More information

Take a look at the folder with examples or check out some docs:

Development

To develop on this component, install the dependencies and then build and watch the static files:

npm install && npm run start

Once complete, you can view the component's example in your browser (will open automatically). Any changes you make to the example code will run the compiler to build the files again.

To lint your code, run the tests, and create code coverage reports:

npm run full-test

Requirements

react-vis makes use of ES6 array methods such as Array.prototype.find. If you make use of react-vis, in an environment without these methods, you'll see errors like TypeError: Server rendering error: Object x,y,radius,angle,color,fill,stroke,opacity,size has no method 'find'. You can use babel-polyfill to polyfill these methods.

Rate & Review

Great Documentation2
Easy to Use2
Performant0
Highly Customizable2
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Preveen RajKochi, Kerala, India58 Ratings49 Reviews
Software Engineer @bigbinary
4 months ago
Highly Customizable

When everyone suggested me to use d3.js for implementing a stacked barchart. I was sceptical about the deadline and the learning curve I have to conquer. I came to see react-vis from a youtube video and when I knew it is built over d3.js, I felt like this can be the one. The package provides most of the graphs out of the box with high customization. The flexibility of the plots was remarkable. I didn't have to implement any nerdy container height and width calcuation because of the inbuilt flexibility of the objects.


1
ajayesivan
Nazim LachterMarseille, France12 Ratings0 Reviews
{ developer: true, ops: true, stack: [ "Go", "TypeScript", "React", "Kubernetes" ] }
1 year ago
Highly Customizable
Easy to Use
Great Documentation

Tutorials

No tutorials found
Add a tutorial