Step by Step guide to implementing Nivo graphs into CoreUI react template

Nivo is built on top of d3 and it provides supercharged React components to easily build dataviz apps. Several libraries already exist for React d3 integration, but just a few provide server-side rendering ability and fully declarative charts.

Use @nivo/core package as a base and then add individual packages specific to your need. for example to add bar support install @nivo/bar or for Pie graph please add @nivo/bar package.

Key features:

- Highly Customizable

- Motion/Transitions, powered by react-spring

- Interactive Components Playground

- Exhaustive Documentation

- SVG Charts

- HTML Charts

- Canvas Charts

- Server-Side Rendering and HTTP API

- Patterns & Gradients

- Theming

- Responsive Charts

Video content timeline:

- Tutorial Source code intro

- NIVO Intro

- CoreUI React Admin Template

- Adding routes for graphs

- Adding Nivo Libraries

- Graph Placeholder Code

- Bar Graph implementation

- Horizontal Bar support

- Data Table for graph data

- Bar Graph Code review

- Pie graph implementation

- Donut graph implementation

- Bump Graph implementation

- Color Scheme implementation

- AreaBump graph implementation

- Funnel graph implementation

- Bullet graph implementation

- Code push to GitHub

Nivo URL:

https://github.com/plouc/nivo

Code related to this project:

publiccode/coreui/coreui-nivo-graphs at master · prodramp/publiccode

That’s all for now.

@avkashchauhan