react-vis

react-vis | Demos

Data Visualization oriented components

Overview

A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatteplots, pie and donut charts, tables with fixed headers 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 overriden 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 "./node_modules/react-vis/main";

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 "./node_modules/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>

More information

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

• Common concepts:
  • Scales and Data about how the attributes can be adjusted.
  • Animations about how to tweak animations in the library.
• Components:
  • XYPlot about orthogonal charts.
  • RadialChart about radial charts.
  • Table about table.
  • Treemap about making tree maps.
  • Legends about the legends.

Development

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

npm install && npm run watch

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 test

Changelog

v0.10.1

In this release we release a new chart type, a large repo refactor, address a variety of bugs, and a host of additional features!

• New Chart: Type: Sankey Diagram: this chart type allows users visualize data flows and transfers. We are initially releasing this chart in alpha, so that we can gather feedback, and iterate to make the best chart that we can! Check out the docs here here!

• Bug Fix: Fix numerous bugs on the radial plot, including mouse interaction issues, incorrect domains, and props falling out of sync

• Refactor: We reorganized the way that we are keeping/organizing our repo, installed yarn, added webpack for the examples. (Pro tip, if you are having trouble running the examples after upgrading rm -rf your dist)

• Feature: Allow custom crosshair orientation

• Feature: Added interaction listeners for the tree map