I'm using nvd3.js to generate a pie chart like this:

I've been trying to find a way of editing the legend labels so that they also show the value of each segment, like "en: 20%, de: 15%" etc.

I can easily edit the tooltip content with chart.tooltipContent() but there doesn't seem to be a similar method for the legend, or at least nothing that I've found in the nvd3 docs or source code - does anybody know a way of doing this?

I'm using nvd3.js to generate a pie chart like this:

I've been trying to find a way of editing the legend labels so that they also show the value of each segment, like "en: 20%, de: 15%" etc.

I can easily edit the tooltip content with chart.tooltipContent() but there doesn't seem to be a similar method for the legend, or at least nothing that I've found in the nvd3 docs or source code - does anybody know a way of doing this?

• javascript
• nvd3.js

2 Answers 2

Looking for something like this ?

var chart = nv.models.pieChart()
   .x(function(d) { return d.label +' '+ d.value })
   .y(function(d) { return d.value })
   .showLabels(true)

nvd3 pie chart offers labelType:

var chart = nv.models.pieChart()
  .labelType("percent")

labelType can be: "key", "value", "percent" or even a function.

var chart = nv.models.pieChart()
  .labelType(function(d, i){ return d.data.x + ': ' + d.data.y; })

I found this checking the source code. nvd3 is awesome, but could use a much better documentation!