dc.js piechart legend: display only top 5

Question

I am generating a piechart (doughnut chart to be precise) which has around 50 items, but the top 5 of them accounts for 95% of the chart. When I display the legend info, its overlapping the chart, since there are many legend items. I was wondering if there is an option to just limit the legend display to top 5 items.

https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#legend

I do not see any option to limit the legend display to say top 5 or top 10.

I guess it is assumed that you would cap the pie chart itself, rather than just excluding the tiny ones from the legend. — Gordon
I have a dc.dataTable which displays the items as a tabular format. I cannot cap the pie chart itself, since that would remove entries from my dataTable. — helios
The capping should only affect the way the data is displayed in the piechart; it should not affect any other chart. — Gordon
No, I mean using the capped mixin which the pie chart inherits from. It simply takes the smallest bins and puts them together into an "Others" bin. It won't affect other charts. See the pie example. — Gordon

thg thg · Accepted Answer · 2016-03-08T08:43:07

You can always modify the dc.js library itself where you can do the following in the legend mixin:

dc.legend = function () {
...
//START MODIFICATION
var _maxItems;
_legend.maxItems = function(maxItems) {
    _maxItems = maxItems;
    return _legend;
};
//END MODIFICATION
...
_legend.render = function () {
    _parent.svg().select('g.dc-legend').remove();
    _g = _parent.svg().append('g')
        .attr('class', 'dc-legend')
        .attr('transform', 'translate(' + _x + ',' + _y + ')');
    var legendables = _parent.legendables();

    //START MODIFICATION
    if (_maxItems) {
        legendables = legendables.slice(0, _maxItems);
    }
    //END MODIFICATION
...
}

dc.js piechart legend: display only top 5

1 Answers