If you've read through the adding the axis labels section most of this will come as no surprise.
What we want to do to add a title to the graph is to add a text element (just a few words) that will appear above the graph and centred left to right.
The code block we will use will looks like this;
svg.append("text") .attr("x", (width / 2)) .attr("y", 0 - (margin.top / 2)) .attr("text-anchor", "middle") .style("font-size", "16px") .style("text-decoration", "underline") .text("Value vs Date Graph");And the end result will look like this;
svg.append("g") // Add the Y Axis .attr("class", "y axis") .call(yAxis); // PUT THE NEW CODE HERE! });Now since the vast majority of the code for this block is a regurgitation of the axis labels code, I don't want to revisit that and bloat up this document even more, so I will direct you back to that section if you need to refresh yourself on any particular line. But..... There are a couple of new ones in there which could benefit from a little explanation.
Both of them are style descriptors and as such their job is to apply a very specific style to this element.
.style("font-size", "16px") .style("text-decoration", "underline")
Because strictly speaking, this is the sort of thing that would be placed in the <style> section of the HTML code, but in this case since it is only going to be used the once, we shouldn't feel too bad putting it here.