Implementing Nivo Graphs into CoreUI React Template

Learn how to implement Nivo graphs into a CoreUI React template in this comprehensive tutorial. Explore the powerful features of Nivo, a React-based data visualization library built on D3, and integrate various chart types into a CoreUI admin dashboard. Follow along as the instructor guides you through setting up routes, adding Nivo libraries, and implementing bar, pie, donut, bump, area bump, funnel, and bullet graphs. Discover how to customize color schemes, create data tables for graph data, and optimize your React components for building interactive data visualization applications. By the end of this hands-on session, you'll have the skills to create visually stunning and responsive charts with server-side rendering capabilities in your React projects.

Syllabus

- Video Start
- Introduction
- 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
- Recap
- Credits