I built a pie chart with dc.js, with the following:

var chart = dc.pieChart(selector, this.chartGroup)
  .width(200).height(200)
  .dimension(this.dimension)
  .group(this.group)
  ...
  .legend(dc.legend().x(10).y(255).gap(5).horizontal(true))

chart.render()

Is there a way to format the labels on the legend with something like the following:

function (d) {
  return d.key + ': ' + d.value;
}

I built a pie chart with dc.js, with the following:

var chart = dc.pieChart(selector, this.chartGroup)
  .width(200).height(200)
  .dimension(this.dimension)
  .group(this.group)
  ...
  .legend(dc.legend().x(10).y(255).gap(5).horizontal(true))

chart.render()

Is there a way to format the labels on the legend with something like the following:

function (d) {
  return d.key + ': ' + d.value;
}

• javascript
• charts
• d3.js
• dc.js

3 Answers 3

The last answer seems partially true. I would suggest the following:

    .legend(dc.legend().x(100).y(400).itemHeight(13).gap(5).autoItemWidth(true).legendText(function (d) {
        return d.name + " " + Math.round((d.data / totalPrice) * 100) + "%"
    }));

Where d.name is the actual label you will see in the legend. d.data is the actual value.

I also needed to add (%) to the pieChart legend for several graphs. I ended up modifying a copy of the legend.js from dc.js-2.0.0-beta.5\src and include that in my pages.

See http://jsfiddle/za8ksj45/36/ for working example

    The first ~260 lines is the modified legend.js that can be put in a separate file.
    (I don't have a place I could serve it from so I had to include the file content).

    The main modification starts at line ~88

            itemEnter.append('text')
            .text(function(d) { 
                var legendText = d.name;
                if (_showPercent) {
                    var groupTotal = d.chart.group().all().reduce(function(a, v){ return a + v.value; }, 0);
                    //legendText = legendText + " (" + (100*d.data/groupTotal).toFixed(_percentDecimals) + "%)";
                    //legendText = legendText + " = " + (100*d.data/groupTotal).toFixed(_percentDecimals) + "%";
                    legendText = legendText + " - " + (100*d.data/groupTotal).toFixed(_percentDecimals) + "%";                                              
                }
                return legendText; 
            })
            .attr('x', _itemHeight + LABEL_GAP)
            .attr('y', function () {
                return _itemHeight / 2 + (this.clientHeight ? this.clientHeight : 13) / 2 - 2;
            });

The modification consists of two new methods for legend()
   .displayPercent (default=false to keep original behavior the same)
   .percentDecimals (default=1)

The hardest part to figure out was the following line:

 var groupTotal = d.chart.group().all().reduce(function(a, v){ return a + v.value; }, 0);

It calculates the grand total for the current filtered group that is driving the pieChart which can be used to calculate the percentage.

I played with a couple different string to show percentage. It should probably be replaced with a string like this: - (%%) where %% gets replaced with the actual percentage. That way you can customize it for each legend without having to touch the code.

Works great for a bunch of pieCharts I used so far. I wanted to share this on stackoverflow since I have gotten so much help from this site myself. If this is useful, I can expand it a bit and submit it for inclusion in some future release.

Now you can simply use the .legendText() method in the dc.legend() object!

In your particular case, the solution would be:

var chart = dc.pieChart(selector, this.chartGroup)
  .width(200).height(200)
  .dimension(this.dimension)
  .group(this.group)
  ...
  .legend(dc.legend().x(10).y(255).gap(5).horizontal(true).legendText(function(d) {
    return d.key + ': ' + d.value;
  }))

chart.render();

This method is defined here.