I recently saw this Spider-Man across the Spider-Verse movie in theaters, and I thought it was absolutely amazing. So that made me kind of curious on how all the different Spider-Man movies were rated on IMDB compared to one another. And that's exactly what we see in this chart here. js chart.
Great. Let's get to it. js. The command for this is mpx-nuxt-init.
Now, I've already run this and started my project, so I won't run it again, but I will explain why I'm using Nuxt and not necessarily a vanilla view project. The reason is simple. Nuxt gives me a few conveniences, namely file-based routing and auto-import of all views built in composition functions. that just makes it a little easier to work with.
ts file here, I do have SSR set to false, so there is no server-side rendering going on in our project. This is essentially a vanilla view project, just with the conveniences of of Nuxt. view, I've replaced the Nux welcome that comes out of the box when you create a new Nux project. And I've supplied the Nux page component here.
This enables file-based routing within my project so I can create a pages directory and then get a brand new route based on all of the pages within this directory. view page. It's just an empty div right now. provides a little padding on the body so that we can see our chart a little bit better.
You could go through these same steps on your own pretty quickly and easily, or you could download this boilerplate code from the description below. Finally, I have started my development server by running npm run depth. Perfect. Now we can start creating our bar chart.
js package. js's different chart types via a dedicated component. So if we were creating any of those other chart types, we could import that from the library instead. Cool.
js peer dependency. There are quite a few of them here, so I'll just copy and paste them into my document. js donks, and you could do likewise or get it in the source code. js.
With that in place, we can now start creating a bar chart. Inside of my template area, let's go ahead and use that bar component. Over in the browser, we get an error, cannot read properties of undefined, reading labels. That's because we're trying to display a bar chart without any data, which makes no sense.
Let's fix that. Back in the code, I'm going to create some reactive data called chart data. I've just copied and pasted this in here as it was a little bit much to type. You could copy it and paste it from the source code for this lesson if you'd like.
But basically, this is an object broken into two different properties. We have a labels property. which is defining what labels appear at the bottom of my bar chart. For us, it's the name of each of the Spider-Man movies.
Then I also have a property called datasets. Now, datasets is an array. We only have one dataset, and that is the rating for each of the movies. So inside of the datasets array is a single object defined with a data property on it.
And in here, I've placed all the different IMDB ratings for these different Spider-Man movies. Now, I use chat GPT to actually generate this in the format that I wanted as JSON. So these individual ratings here might not be completely accurate and up to date as of the time of recording of this video. If you wanted to double check these on IMDB yourself, you could and updated accordingly.
Lastly, we need to provide this chart data to the bar component. via its data prop. And let's see where this gets us. Nice.
Now we have each of the different Spider-Man movies listed inside of our chart. The title of each movie is listed at the bottom of the chart. And then we have these writings going up the side, automatically numbered based on the data set we gave it. If I were to hover over each of the different bars, we can see the exact rating that the movie got.
and a little pop-up as well as the title of the movie. This is essentially the functionality we're looking for, but let's spice it up just a little bit. Let's get our bars alternating between the color red and blue to give a nice Spider-Man theme to the chart. I can do that with the background color property for our data set, and then provide it an array of different colors.
Awesome. That's okay, but in order to know what this property was called, I had to go to the documentation, look it up, copy and paste, and it was a bit of a pain. What I would prefer to do is work in TypeScript and have it autocomplete these different options for me. So let me show you how to do that real quick, and then we'll move back to the background color.
OK, so I'm going to add the Lang equals TS attribute to my script setup tag. Then I need to import the chart data type. js. Great.
Lastly, I can type my reactive chart data as the chart data type specifically for a bar chart. Now, if I were to remove background color and then press control space bar, you can see that we have all of the different options pop up in the autocomplete list. And here is background color among them. But there's also a lot of other options at the tip of our fingers.
that we could play with. Let's go ahead and choose background color. And then I'm going to provide a little bit nicer blue and red to color our bars over in our browser. Now, sure enough, our theme is coming together.
However, we have this pesky undefined label at the top of the page. I don't think that's necessary for our use case. So we can remove this by providing some different options to the bar component. If I pass in an empty object and then press control spacebar again, Once more, we have an autocomplete list of options to choose from.
I just happen to know from looking it up in the documentation that what I want to do is target a plugins option and then specifically the legend plugin and set its property to display faults so that this legend of labels no longer displays on page. So TypeScript wasn't able to help me quite as much here as I would have liked. but sometimes it's just necessary to refer to the dot. Back in the browser, now that label is gone.
And there you have it. js chart is complete.