Skip to content

uber/react-vis

Folders and files

NameName
Last commit message
Last commit date
Mar 18, 2022
Dec 18, 2024
Feb 22, 2016
Jul 13, 2020
Apr 21, 2017
May 25, 2020
May 24, 2020
Jan 25, 2017
May 29, 2020
Jun 7, 2023
Aug 14, 2018
Dec 15, 2017
Mar 18, 2022
Feb 22, 2016
Mar 25, 2023
Apr 6, 2018
Jun 7, 2023
Jun 7, 2023
Aug 6, 2018
Dec 28, 2022
Apr 3, 2017
Jun 7, 2023

Repository files navigation

deprecated version build build downloads

react-vis | Demos | Docs

A COMPOSABLE VISUALIZATION SYSTEM

demo

NOTE: This repository is now under new management. Please reach out to the new administrators if you have any questions.

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

Make sure you are using the correct version of node and yarn. To do so, check package.json and find the entry "volta", e.g.

"volta": {
  "node": "14.18.0",
  "yarn": "1.22.4"
}

It's recommanded to install volta to manage node and yarn.

To develop on react-vis, navigate to packages/react-vis, and install the dependencies and then build and watch the static files:

yarn && yarn 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 run the tests, and create code coverage reports:

yarn cover

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.