Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-vis

uber-common402.3kMIT1.12.1TypeScript support: definitely-typed

Data visualization library based on React and d3.

d3, react, visualization, chart, es6, babel

readme

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.

changelog

v1.12.0

  • Upgraded all d3 dependencies
  • The layout of Sankey and Contour chart are changed due to the d3 upgrade
  • Build fixes
  • Revert #1358 (note that this PR was not included in 1.11.7)

v1.9.2

  • we removed the check-stylesheets warnings.
  • it's now possible to pass better styling options for radial charts labels. It's also possible to position axis titles along the axis.
  • react-motion and react minimal versions have been updated.

v1.0.0 Breaking changes

We recently made a major jump to version v1, which naturally includes some breaking changes. Specifically these include

Table is deprecated: There are other substantially better tables in the ecosystem, so we decided to stick to what we do best, charts and plots. Stylesheet has been moved: the stylesheet for react-vis can now be found within the dist folder, so simply modify your style import to be:

@import './node_modules/react-vis/dist/main';

Default Opacity: The default opacity behavior has been modified. Previously, react-vis asserted you had a linear scale with range [0.1, 1] and place your value within that range. Now react-vis presents a literal-scale by default. Check your opacities to make sure they are correct. tickSizeInner & tickSizeOuter have been reversed: the names of these props on the axes component have been switched. We feel this arrangement offers a more natural way to interact with the plot. ALIGN.TOP_RIGHT was removed from hint.js: this case did not match the orientation scheme followed by this component so was removed.

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

v0.9.0

This release addresses a couple of bugs and improves our dep tree. The only psuedo-breaking change is to the layout of radial plot. The way that it now works is that the pie is centered within the given width/height and then allowed to grow to an innerWidth/innerHeight that is computed from the margins and the width/height.

  • Bug: Modify margin system for radial chart
  • Improvement: Support for classname on legends
  • Chore: Remove duplicated styles
  • Bug: Add default props to classname for axis
  • Chore: Update deps, fix lint errors

v0.8.0

This release adds two new props (and set of illustrative examples) to Hint component: align and getAlignStyle. align (replacing orientation prop) is an object with two props — horizontal and vertical — and set of values that support existing and new hint placement: a) around a data point in one of four quadrants (imagine the point bisected by two axes — vertical, horizontal — creating 4 quadrants around a data point). b) New: pin to an edge of chart/plot area and position along that edge using data point's other dimension value.

Developers wanting total control can use the getAlignStyle(align, x, y) function that returns an inline style object with one or more of the following props (left, right, top, bottom).

The orientation prop is supported for backwards compatibility but will be deprecated in future release.

See the following figure explaining the two props (horizontal, vertical) for the align prop object. react-vis-hint

v0.7.0

This release adds a new series: rectSeries. Rect series operates similarly to barSeries: they consist of a series of rectangles of various size that be stacked, but with one key difference. Where the bar series operates on the assumption of an ordinal axis, rect series operates on an assumption of a continuous one. This allows users to specify the positions of the edges of their rectangles!

alt text

Rect series are great for histograms, as they allow you to exactly specify the bounds of buckets. They can be accessed via VerticalRectSeries and HorizontalRectSeries. Check out the examples for more details. This is non breaking change, and can be dropped in immediately.

v0.6.8

  • Feature: Export Abstract series and the rest of the functions in scale utils.
  • Feature: Add specific class names to x and y axes

v0.6.6

  • Improvement: added line smoothing via d3-shape curve functions (#185).
  • Improvement: Expose GridLines, AxisLines, and ScaleUtils to export
  • Improvement: Add className prop to all series
  • Documentation: Expand tree map example
  • Documentation: Add elevated area chart example

0.6.4

  • Bugfix: Fixed the issue with numeric titles in legends (#154).

0.6.3

  • Bugfix: fix the broken event listeners for radial charts (#150);
  • Bugfix: compatibility fix: do not treat null and undefined in scale props as existing values (#149).

0.6.2

  • Feature: added a new tickLabelAngle property that rotates the tick label (see the documentation for details).
  • Improvement: added a little bit of examples for the axes.
  • Bugfix: fixed misplaced axis title when orientation is set to 'top' or 'right' (#146).

0.6.1

  • Bugfix: axis is misplaced when orientation is set to 'right'(#143).

0.6

TL;DR

New legends (sic!), new animations, faster rendering of components, no d3 in actual rendering process, new examples and more.

Breaking changes

  • animation property works differently: duration is removed in favor of stiffness, damping and precision. Please refer to the documentation for the latest changes.
  • undefined and null values of important scale-related attributes for domains and ranges are now treated as real values (and not ignored anymore).

Non-breaking changes

  • Feature: added the first version of legends (discrete and continuous color legends, continuous size legend). Please refer to the docs for legends for more details.
  • Improvement: got rid of assigning properties with d3 after rendering, currently all attributes and event listeners are attached using React (and it is faster).
  • Improvement: eliminated the use of d3-selection and d3-transition modules and made the source code smaller.
  • Improvement: added some structure into the examples and simplified their source code (check them out).
  • Bugfix: fixed crashing on animation (#114).
  • Improvement: onNearestX event now returns the index of the selected data point as an attribute (more details here)
  • Bugfix: added the donut chart to the list of examples (#83).
  • Bugfix: fixed failing bar charts when the number of segments was changed (#55).

0.5

TL;DR

Upgraded to modular d3, compiled code became smaller, changed the API for axes and grids, fixed several bugs.

Breaking changes

  • d3-axis is no longer used, the rendering of axes and grids is made by react (and works faster).
  • The API of axes (XAxis and YAxis) was significantly changed:
    • the API of axes is now (almost) compatible to the API of 'd3-axis'.
    • labelFormat and labelValues attributes for the axes are removed: similar results can be done achieved when tickFormat and tickValues attributes are used (see the the updated documentation for axes for more details).
    • tickFormat function is now gets only one (value) argument instead of two (value and index).
  • The API of grids (VerticalGridLines and HorizontalGridLines) was significantly changed: it partially replicates the API of the axes. Please refer to the updated documentation for more detail.

Non-breaking changes

  • Bugfix: margin for the radial and ortogonal chart is now able to receive partial objects (e. g.<XYPlot margin={{left: 20}}> instead of margins for each side) and numbers (e.g. <XYPlot margin={20}>)
  • Bugfix: makeVisFlexible doesn't fail anymore (see #118).
  • Minor bugfixes and improvements.

Please find full change log here.