Because this graph is very simple, yeah, we could probably get away with not having a legend. But imagine a graph with multiple sets of data. Well, you would need to designate between what this line represents and what that line represents. So, yeah, Chart.js provides a legend that we can hook into. Let me show you. If I switch back to my project, here's our welcome view, where we load up our graph and we pass in labels, values, and a default color, which I will remove. Next, if we switch over to our graph, and if we now scroll down, here's where we set up our data with the labels and the data sets. But now, yeah, I want to show you how to add a legend as well. So let's do this. Let's save this as chart, and then I'm going to console.log chart.generateLegends. And let's just see what we get out of the deal. Now, right now, we're not running Gulp, so let me do gulp watch, and then I'll keep an eye on things. And if we now switch to Chrome

if I come back and give that a refresh, now you'll see that the label there gets inserted. So why don't we make that our next step? Let's add that. If we scroll up, here's our template. Why don't we keep this here, but we're going to switch over to ES6 template strings, and that way we can have multi-line templates here, and that can definitely be useful. Anyways, so we have a canvas, but next we're going to have a legend, but now notice that we don't have a single parent element. So we have two siblings here. Generally, as a good rule of thumb, when you have more than one tag, create a root tag, even if it's a simple div like this, and that way you have one root node. So now, we've updated our template, but if I come back and give this a refresh, yeah, you're going to see it fails. this.l.getContext is not a function. And that's because, well, of course, if we scroll down right here, this.l, that no longer

created a div for that. So let's do this. Let's say legend, and then down here we'll set up some data. Return legend equals nothing for the time being. And then if I scroll down to the bottom, yeah, rather than logging it, I can say this.legend equals chart.generateLegend. Okay, so if we come back and give it a refresh, there it is. But now in this case, we're actually seeing the HTML tags. So let's switch back, and then up here, yeah, I'm going to wrap it within three curly braces. And yeah, this way we can output raw HTML. So come back and give it a refresh, and now we have our legend. But now I've noticed that this confuses a lot of people, because you see a list item, but what does that refer to? You know, it doesn't give you any more guidance than you had before. Well, take a look at this. Don't forget that there is a span tag here that has a background color. So that means all you'd have to do is style that span. For example, width is 10, height is 10, display is

I scroll down, you can call chart.generateLegend and then throw that into the DOM however you want to. If you're using jQuery, you can use appendChild or find an element and call .html. That's fine. In our case, we're using view, so we save it to a legend property, and then right up here is where we spit out the raw HTML for that. And if you want, if you don't want to show this unless you have one, you could do something like this, but I don't think we need to in this case. Next, once that has been inserted, you may need to add just a little bit of styling to make it fit how you want. Okay, so in the next lesson, if I switch back to my GraphComponent, we're going to review this section right here. The GraphComponent knows too much about our specifics, and in reality, it shouldn't. It should work in any project we could possibly throw it at. So it sounds like we need to get rid of all this hard-coded crap here and move it up a level. So stay tuned for that.