Inside of our dashboard, we have this chart being displayed on the home page. This is powered by a library called UNOvisView. Over in the code base, this is the component for that home page. Scroll to the bottom, and here we can find the component for that home chart.
Sure enough, here is UNOvisView being imported at the top, along with multiple different components. While UNOvisView isn't super difficult to work with by itself, there is a charting solution built on top of this library that is meant specifically for NuxtUI. It's called NuxtCharts. Let's get it set up in our project and try adding a new chart.
Let's go ahead and add a new chart to our dashboard with it. Under the installation guide, I'll copy the install command for PMPM. Back over in our code base, open up a new terminal, paste that in. While it's downloading, we will add the module to our Nuxt config file.
And then lastly, let's try adding a new chart by copying this code right here. Let's see, what is this charting? It looks like sales and profit. So I'll call the new component PerformanceChart and paste that in.
And there we go. Look how simple this is compared to what we had before. There's a lot less going on. Now, of course, their functionality isn't exactly the same.
But let's see what this output's compared to the previous. And in the browser, hmm, looks like something's not quite working here. Let's check the console for errors. It cannot read.
Properties of undefined. Reading month. For some reason, that is undefined. So I'll just update it to look something like that.
Refresh our page. And yeah, there we go. Now we can plot two different things on a single chart and compare them month to month. And the code for it?
It is super, super simple. We simply provide an array of data along with an object of categories that matches up the property inside of the data with the line that it should correspond to and give that line a label and a color. The X formatter tells the chart what to display for each item on the x-axis. In our case, we want that to be the model.
And that means we'll block it. Besides the line charts, there are other free and open-source charts available with this library including an area chart, which actually looks even more so like our revenue chart down here. I bet you could use that to replicate the revenue chart very easily. That could be a challenge after you complete the lesson.
And then there's also bar charts, charts, which you can copy the code for, the line chart that we just saw, donut charts, bubble charts, Gantt charts, and even a few other helpful components. To get access to more comprehensive templates, NuxtCharts includes a block section with 25 plus premium Nuxt UI blocks. This includes not only more robust places to start your different charts, but other components as well.