Donut Pie Chart - Add a Title - NVd3.js

Question

I'm exploring the NVD3.js library. It amazes me how quickly things can be produced in it.

But it seems like it's difficult to alter the chart sometimes. In this case, I would like to add a title to my chart.

The other thing, I would like to add additional data in the tool-tip. So on hover, It would also include the note in my data.

Data sample:

var data = [
{
  key: "Loans",
  y: 52.24
  note: "Expect greatest value"
}];

This is the code I'm playing with:

nv.addGraph(function() {

var width = 500,
    height = 500;

var chart = nv.models.pieChart()
    .x(function(d) { return d.key; })
    .values(function(d) { return d; })
    .color(d3.scale.category10().range())
    .width(width)
    .height(height)
    .donut(true);

chart.pie
    .startAngle(function(d) { return d.startAngle/2 -Math.PI/2; })
    .endAngle(function(d) { return d.endAngle/2 -Math.PI/2 ;});


  d3.select("#chart")
      //.datum(historicalBarChart)
      .datum([data])
    .transition().duration(1200)
      .attr('width', width)
      .attr('height', height)
      .call(chart);

return chart;
});

---

Update: The original code for the tooltip is located within src->models->pieChart.js:

tooltip = function(key, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p> Confidence: ' +  y + '%</p>'
  }

I've tried overriding this with my own function. But either get errors or no change.

Title Update: I typically use the following code (or something similar) for titles.

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("Awesome Title");

But of course, this isn't valid in NVD3. I'm not aware of what function is used to specify a title.

Answer 1

I think your looking for chart.tooltipContent() JSFiddle: http://jsbin.com/idosop/7/edit

      var tp = function(key, y, e, graph) {
            console.log(key, e, y);
            return '<h3>' + key + '</h3>' +
                   '<p>!!' +  y + '!!</p>' +
              '<p>Likes: ' +  e.point.likes + '</p>';
      };
      chart.tooltipContent(tp);