Add legend to pie chart in dc.js

Question

I'm building a dc.js-based visualization where one of the charts is a pie chart. See:

http://jsfiddle.net/luiseth/t8we6/

The peculiarity of my case is that the labels that this chart will display are usually rather long, so much that usually get clipped by the chart's container (the <div>). So I thought of having them appear on a legend, but I haven't been able to figure how to have the legend appear to the right of the chart. How can I do that? Playing around with the width has not helped at all, since the chart gets positioned at the center of the <div>.

My code at the moment is:

chart.width(500)
     .height(180)
     .radius(80)
     .dimension(categoryDimension)
     .group(categoryGroup)
     .legend(dc.legend().x(140).y(0).gap(5));

Plus a .label directive to replace the label with a percentage.

Men

Answer 1

I just tried this with a CSS override and it seemed to work:

The pie chart creates an SVG canvas based on what width you declare the chart and then places it in the center. I targeted that SVG canvas and added a different width and it displays. Offsetting the label past the canvas causes it to be hidden.

So if your pie chart has a width of 200, and an id of "piechart", and you want to add an additional 150 pixels to account for the label, try the following CSS:

#piechart svg { width: 350px; }

Remember to account for that width in your page layout.

Paulsen

It works perfectly, thanks! Now I want to do the change within the JS itself, but this is the fundamental issue. Again, thanks! – Men

though a little ugly hack, this allowed proper control of both chart and legend. Thank you – Elviraelvis