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.

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.

• javascript
• d3.js
• pie-chart
• nvd3.js

Share Improve this question Follow edited Apr 29, 2013 at 19:12 EnigmaRM asked Apr 25, 2013 at 18:27 EnigmaRMEnigmaRM 7,6321111 gold badges4848 silver badges7474 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I think your looking for chart.tooltipContent() JSFiddle: http://jsbin./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);