I'm trying to create a pie chart legend in dc.js. However, there is no legend. It just... doesn't show up. Everything appears the same as before I used the legend command.
Here is the legend code:
.legend(dc.legend().x(80).y(70).itemHeight(13).gap(5));
Here is the rest of the relevant code:
var companyDimension = data.dimension(function(d) {return d.company;});
var totalSalesByCompany = companyDimension.group().reduceSum(function(d) {return d.total;});
var pieChartCompanySales = dc.pieChart("#pie-chart-sales-by-company");
pieChartCompanySales
.width(150).height(150)
.dimension(companyDimension)
.group(totalSalesByCompany)
.legend(dc.legend().x(80).y(70).itemHeight(13).gap(5));
dc.renderAll();
I'm getting my legend code from this tutorial, and it seems to check out with the official docs. What am I doing wrong?
I think you are not doing anything wrong. Its the problem with the version of dc.js you are using. Please check http://jsbin.com/xasenusu/1/. I have changed the version of dc.js as well as gave the div a little more space to svg.
For me, this solutions doesn't works. So I developed the legend manually. For each value, I put some CSS to indicate the color and the percentage there. This is not the best solution but works. I hope the version 2.0 stable come on very soon!
CSS
JS
HTML