d3.js - How to add a title for a NVD3.js graph

Question

I want to add a title text over the graph in NVD3.js.

I tried the following,

nv.addGraph(function() {
var chart = nv.models.linePlusBarWithFocusChart()
    .margin({top: 30, right: 60, bottom: 50, left: 70})
    .x(function(d,i) { return i })
    .color(d3.scale.category10().range());

chart.append("text")
    .attr("x", 200)             
    .attr("y", 100)
    .attr("text-anchor", "middle")  
    .text("Sample Charts");
}

Its (Highlighted) working for D3.js but not working for NVD3.js. I'm getting a Blank page..

I want to place the text over the Chart as like the following image (Which is created in Paint)

How can I achieve this?

Answer 1

You can use D3 to select the container SVG and append the title:

d3.select('#chart svg')
  .append("text")
  .attr("x", 200)             
  .attr("y", 100)
  .attr("text-anchor", "middle")  
  .text("Sample Charts");

This assumes that you're using the same ID etc for the SVG as in the NVD3 examples, if not, simply adjust the selector accordingly.