Data-Visualization oriented components Sample in 2020

Data-Visualization oriented components Sample in 2020

tutorials -


Data Visualization oriented components


A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, pie and donut charts 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.

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.

live demo


Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff