Add legend to pie chart in dc.js
dc.js, legend, pie-chart
Solution
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.
Problem
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.