The main purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:
- Simply deploy with React components.
- Native SVG support, lightweight depending only on some D3 submodules.
- Declarative components, components of charts are purely presentational.
All the components of Recharts are clearly separated. The lineChart is composed of x axis, tooltip, grid, and line items, and each of them is an independent React Component. The clear separation and composition of components is one of the principle Recharts follows.
For more examples using
visx, check out the gallery.
nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3.
Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.
In order to use nivo, you have to install the
@nivo/core package and then choose some of the scoped
@nivo packages according to the charts you wish to use:
yarn add @nivo/core @nivo/bar
- Highly customizable
- Motion/transitions, powered by react-motion
- Component playground
- Exhaustive documentation
- Isomorphic rendering
- SVG charts
- HTML charts
- Canvas charts
- server side rendering API
- SVG patterns
- responsive charts
The name "billboard" comes from the famous
billboard chartwhich everybody knows.
Download dist files from the repo directly or install it via npm.
You can download the uncompressed files for development
A COMPOSABLE VISUALIZATION SYSTEM
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:
react-visdoesn't require any deep knowledge of data visualization libraries to start building your first visualizations.
react-visprovides 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-vissupports the React's lifecycle and doesn't create unnecessary nodes.
React wrapper for Chart.js 2.0 and 3.0, the most popular charting library 📊
React wrapper for Chart.js
See these examples for more information
More react resource❤️ A curated list of awesome React frameworks, libraries and Components.