nvd3: editing labels in pie chart legend

Question

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?

Eric

Answer 1

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)

Allomorphism

Ah, fantastic, that's put me on the right track. I was totally forgetting that I could change the chart's label itself; I was focused on changing it only for the legend. Thank you! – Eric

@Eric - Its sometimes the little things that we forget to look at, glad it was useful. – Allomorphism

Answer 2

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!

Viscometer