See the live demo at http://uber.github.io/react-vis
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
Include the CSS from ./node_modules/react-vis/main
in your HTML page or via SASS:
@import "./node_modules/react-vis/main";
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.
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
Change log
0.3.2
colorRange
,colorDomain
,colorType
,opacityRange
,opacityDomain
andopacityType
properties are now supported for the Treemap scales (more info about scales is here).- Basic mouse interactions for arcs were added to
RadialChart
: nowonSectionClick
,onSectionMouseOver
andonSectionMouseOut
are supported. - Several children-related bugs are fixed (see #54 and #47).
0.3.1
- Fixed the bug when no bars were shown for one point of ordinal data (see #49 for more details).
0.3
Non-breaking changes
- Travis CI is now supported.
- Stacking was added to the charts. Please refer to the docs of XYPlot for more information.
0.2
Breaking changes
BarSeries
component was split intoVerticalBarSeries
andHorizontalBarSeries
; noorientation
property is needed anymore.- All bar series are aligned to
0
by default. The value can be modified with[scale-name]BaseValue
property. - Alignment of the
Hint
component was fixed: nowtopleft
orientation aligns it to the top left corner, but not to the bottom right.
Non-breaking changes:
- Static getters for
displayName
were removed (interverring with livereactload). - More tests were added.