From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Monthly sales chart

Monthly sales chart - Next.js Tutorial

From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Start my 1-month free trial Buy for my team

Monthly sales chart

“

So now we want to add the chart to the overview or the dashboard page. And we're going to be using a package called recharts, which is really easy to use. And there's a ton of different types of charts. We're just going to use a standard bar chart. And basically, we just import the chart itself. In this case, it would be a line chart. And then the unit, which in this case would be a line. Ours will be a bar. And then the x and y-axis. And down here, you can see the x-axis has a data key of name. And if we look at the data, the name is these page letters. So alongside the x-axis at the bottom is the name. Now, we're going to use the month or the month slash year for our x-axis. So that's what we'll see at the bottom of ours. And then we'll see the prices or the sales numbers on the y. So first thing we need to do is install this package. So let's say npm install recharts. Now I do have to add the flag of legacy-pierre-depths. So if you're watching this course soon after I created it…

Contents