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

Video Description

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-react-admin-template Code related to this project: https://github.com/prodramp/publiccode/tree/master/coreui/coreui-nivo-graphs Please visit: https://prodramp.com | @prodramp https://www.linkedin.com/company/prodramp Content Creator: Avkash Chauhan (@avkashchauhan) https://www.linkedin.com/in/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