Responsive React charts, PieChart, AreaChart with real data using reCharts in Admin Dashboard Panel

This is the 16th part of React MERN Travel Project. In this video we added the charts to the main admin panel. One is the Pie Chart to show the prices of the rooms or categories of the price list. And the other Chart is Area Chart to show a comparison between number of the users and the number of the rooms in the same month for the last 5 months. All this data or information is extracted automatically from our database after been added by the users of the app.
Reactjs
Material UI MUI
recharts
MongoDB
Nodejs
Expressjs
Mongoose

The whole videos playlist of the project:

Source Code on github:

00:00 Introduction
00:29 Creating PieChart for rooms prices
12:20 Creating AreaChart for the number of users and rooms in the same month
23:44 editing MongoDB database collections and documents

[nicuhurd]

Nice and helpful. Thank you for sharing your knowledge.

[jalalkasmani]

Hi, is that possible with react, when you click on any particular portion in chart, the entire data should get refresh and display onlly for that portion?just like tableau, Power bi or qlik sense tool .

[morelalejandro]

Nice, Is a practice with calendar possible?

[subhashinin]

Can you please help me how make recharts accessible using keyboard navigation

[timobrien]

Just so you know the chart looks a bit wonky if there is 0 of any category so I edited mine to do like this
let newArr = []
if(free !== 0) newArr.push({name: 'Free Stay', qty: free})
if(lessThan15 !== 0) newArr.push({name: 'Less Than $15', qty: lessThan15})
if(between15And35 !== 0) newArr.push({name: 'Between $15 and $35', qty: between15And35})
if(moreThan35 !== 0) newArr.push({name: 'More than $35', qty: moreThan35})
setCostGroups(newArr)