Step by Step guide to implementing Nivo graphs into CoreUI react template
Nivo is build 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 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:
(00:00) Video Start
(00:07) Introduction
(02:07) Tutorial Source code intro
(03:05) NIVO Intro
(07:11) CoreUI React Admin Template
(11:40) Adding routes for graphs
(17:42) Adding Nivo Libraries
(20:44) Graph Placeholder Code
(22:02) Bar Graph implementation
(32:00) Horizontal Bar support
(34:38) Data Table for graph data
(48:15) Bar Graph Code review
(53:16) Pie graph implementation
(57:12) Donut graph implementation
(01:05:42) Bump Graph implementation
(01:11:44) Color Scheme implementation
(01:30:05) AreaBump graph implementation
(01:36:40) Funnel graph implementation
(01:47:50) Bullet graph implementation
(01:55:45) Code push to GitHub
(01:56:42) Recap
(01:58:44) Credits
Nivo URL: https://github.com/plouc/nivo
CoreUI React admin template (v4.1.1):
https://github.com/coreui/coreui-free...
Code related to this project:
https://github.com/prodramp/publiccod...
Please visit:
https://prodramp.com | @prodramp
/ prodramp
Content Creator:
Avkash Chauhan (@avkashchauhan)
/ avkashchauhan
Tags:
#webdevelopment, #frontend #react #python #layout #coreUI #flask #webserver #webdevelopment #fullstackdevelopment #pandas #matplotlib #datavisualization #conda #webapp #apply #transform #github #groupby #prodramp #wetogethervc #coreui #nivo #javascript #datavisualization
