From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

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

Rendering sales chart with dynamic values

Rendering sales chart with dynamic values - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Rendering sales chart with dynamic values

“

Now we will render the sales chart dynamically. We have already created the custom line chart. So we will use this chart to render the dynamic values of sales. So first I will add the title to the card where the chart is rendered. So I'll open the dashboard component and add the title before the chart by adding h1 tag and apply style text to Excel and font bold. Then the title will be sales. Let me save the code and open the browser. And the title is rendered. Now I will pass the sales chart data to the custom line chart component as a prop. So I will say data is equal to dashboard data dot sales chart data. Now let me navigate to the custom line chart component. I will receive the data from the props and remove the static array. Let's save the code and check and the sales values are rendered. Now here the chart will look better as more data is filled in. So we have successfully implemented the sales report using the chart. Now I will make the custom line chart component more dynamic…

Contents