Search code examples
dc.js

How to avoid pie chart external labels overlapping using dc.js

   .width(400)
  .height(200)
  .externalLabels(20)
  .externalRadiusPadding(5)
  .drawPaths(true)
  .dimension(genderDimension)

This is my code but the external labels are overlapping where there is a narrow slice in piechart. Is there any why to solve this problem.Thanks in advance.

Solution

  • The only built-in way to deal with this is to use pieChart.minAngleForLabel:

    Get or set the minimal slice angle for label rendering. Any slice with a smaller angle will not display a slice label.

    It just drops the labels for the narrow slices. The angle is specified in radians.

    Currently there is no attempt to avoid collisions between labels. One could imagine bending the lines on the external labels, or making them longer or shorter, but I don't know what algorithm you would use to do this.