I have an overlap issue of the labels and labelsticks in a Pie chart

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Chitra on 1st December 2017
Hi, I am facing overlap issue of labels and labelstick. I am using d3 donut canvas chart. How can i fix that ? Please find my code below.

var data = [1322,7252,3882,1809];
      var pie = new RGraph.Pie('cvs', data);
      pie.Set('chart.labels', ['Product Mentions','Service Requests','Interactions','Quotes']);
      pie.Set('chart.colors', ['#FC4B6C','#26C6DA','#FFB22B','#1E88E5']);
      pie.Set('chart.text.size', 8);
      pie.Set('chart.shadow', false);
      pie.Set('chart.labels.sticks', true);
      pie.Set('chart.labels.sticks.length', 10);
      pie.Set('chart.radius', 50);
      pie.Set('chart.variant', 'donut3d');
      pie.Set('chart.labels.sticks.color', '#000');
      pie.Set('chart.variant.threed.depth', '10');
Posted by Richard on 1st December 2017
Hi there,

Try setting the textDecoration option to false like this example does:


Posted by Chitra on 4th December 2017

I tried by setting the property "pie.Set('chart.text.accessible', false);", now my labels are bigger in size and it's cutting off. How can I fix it ? Any suggestions ?

Thanks in advance.
Posted by Richard on 4th December 2017
Hi there,

If you mean that the text is going off of the edge of the canvas you could:

1. Increase the gutterLeft and gutterRight properties. This depends on your
    gutterTop/gutterBottom though so it may nor have an effect.
2. Use the "radius" property to stipulate the size of the Pie chart. Using a smaller
    size would result in a bigger space for your labels.
3. Increase the width of the canvas. If you do this you might need to adjust the
    radius property as the size of the Pie chart might increase too. Though if you
    leave the height as it currently is this shouldn't happen.


Add a reply

« Back to message list