Solution to overlapping labels

nivo-arc.es.js

var computeArcLink = function computeArcLink(arc, offset, diagonalLength, straightLength) {
  var centerAngle = getNormalizedAngle(arc.startAngle + (arc.endAngle - arc.startAngle) / 2 - Math.PI / 2);
  const { angleDeg } = arc;
  const absSin = Math.abs(Math.sin(centerAngle));
  const offsetReducer = angleDeg < 10 ? 1 : 2;
  const baseOffset = radiansToDegrees(Math.asin(absSin)) / offsetReducer;
  const linkDiagonalLengthOffset = baseOffset * absSin;

  var point0 = positionFromAngle(centerAngle, arc.outerRadius);

  var point1 = positionFromAngle(
      centerAngle,
      arc.outerRadius + linkDiagonalLengthOffset + offset + diagonalLength
  );

@Viktoriya-D I'm happy to make a PR if this solution is correct, I don't understand the implications to the wider codebase. I've asked the question and not recevied an answer. I was hoping a contributor would be able to take it and make it fit for purpose.

We are happy to help you test it, we're on the most recent version of nivo. I am not sure about the rest of codebase, but this is a big problem for us. For now we're using legend, but even legend overlaps with pie chart sometimes and it's definitely not mobile friendly.

Same here, this is causing a big problem for us. Getting this fixed would be a huge relief!

We found a workaround for legend overlapping. We built our own legend with corresponding colors from the chart. So far it is much more responsive and we think will provide a good solution for us.

@mtusman feel free to take the code and create a PR

@Viktoriya-D so you're just avoiding the labels altogether?

Yes. For the most part. Legend allows us to make the chart bigger. We will see if it continues to work well.