Pie chart key overlapping the 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 Alex on 30th July 2015
Is there a way to prevent the pie chart's key from overlapping the chart without manually setting the centerx/centery? I've tried key.position, but that less readable, and I've also tried key.halign, but either alignment results in overlap.

Link: jsfiddle.net/o2fgfx00/1/

var chart3976 = new RGraph.Pie('cvs1', [900,140,15]);
chart3976.Set('chart.gutter.top', 50);
chart3976.Set('chart.gutter.right', 5);
chart3976.Set('chart.gutter.left', 50);
chart3976.Set('chart.colors', ['#00FF00','Blue','Green','Orange','Yellow','Purple','#6699CC','#66FFCC','#CC99FF']);
chart3976.Set('chart.tooltips', ['4479-Donations - 900 (85%)','3165-Fundraising - 140 (13%)','3466-Other - 15 (1%)']);
chart3976.Set('chart.key', ['4479-Donations - 900 (85%)','3165-Fundraising - 140 (13%)','3466-Other - 15 (1%)']);
chart3976.Set('chart.key.background', 'white');
chart3976.Set('chart.strokestyle', 'black');
chart3976.Set('chart.tickmarks', 'circle');
chart3976.Set('chart.linewidth', 2);
chart3976.Set('chart.shadow', false);
chart3976.Set('chart.shadow.offsetx', 0);
chart3976.Set('chart.shadow.offsety', 0);
chart3976.Set('chart.shadow.blur', 15);
chart3976.Set('chart.centerpin', 6);
chart3976.Set('chart.title', 'Contributions');
chart3976.Set('title.xaxis.pos', 0.25);
Posted by Richard Heyes on 30th July 2015
Hi there,

Not really. You could cut down the text in the key and use labels elsewhere on the page - eg below the chart. Or perhaps use the HTML key:


Which isn't constrained by the canvas.


Add a reply


« Back to message list
RGraph on social media