Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

nvd3: editing labels in pie chart legend

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

piechart

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?

like image 881
omnikron Avatar asked Apr 26 '13 09:04

omnikron


2 Answers

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)
like image 159
shabeer90 Avatar answered Sep 30 '22 18:09

shabeer90


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!

like image 20
miguelr Avatar answered Sep 30 '22 19:09

miguelr