1

Im using dc.js to render amongts other things a piechart which has a legend. However when the piechart contains a lot of data all the legend items does not fit and they are simply hidden. I can tell they are rendered if i inspect the DOM.

Screenshot of my problem:

enter image description here

I've tried simply adding a overflow:scroll; to the <g class="dc-legend"> element which holds all the legend items. But that does not work obv since its svg.

I've tried googling around for this but have not come accross a solution. I know in highcharts there is an option to paginate the label.

How to solve this issue in dc.js?

Erik Svedin
  • 1,286
  • 12
  • 26
  • 1
    This is not a very good visual use-case for a pie-chart, when displaying this many groups, regardless of the legend situation. Could you use a different chart type instead? – Ethan Jewett May 26 '16 at 15:47

1 Answers1

2

Have you tried making the container wider? You can use the .svg function which will return the top svg element for the chart, there you can set the width you desire. More info here.

EDIT:

Or you could set a fixed width and height to the div containing your graph and make the svg as big as you want so the labels show up. And then make the div scrollable.

Check this answer for more information: How to get ScrollBars in SVG?

Community
  • 1
  • 1
torresomar
  • 2,219
  • 2
  • 16
  • 28
  • Well i can make the container taller, however that would mess up my layout pretty bad as you can tell by the piechart slice width. There are quite a few different legend items to be rendered. I rather have the legend fixed width next to my pie chart and make the container scrollable/paginated – Erik Svedin May 26 '16 at 09:19
  • to answer your edited answer: Now we're getting somewhere. However there is still a problem since that would mean the actual pie chart would be scrolled out of sight as well. Only the legend must be scrollable. – Erik Svedin May 26 '16 at 09:49
  • Well they are using d3 behind the scenes you should probably check if you can make something to render the labels in another container. In my experience that's the burden of using libraries on top of other ones, you may get the result pretty quick but customizing will be a pain :( – torresomar May 26 '16 at 09:55