How to fix labels clashing problem in RGraph pie chart? - rgraph

Question

I'm creating RGraph pie chart in which labels are clashing. Though I am using labels.sticks property to fix this issue but it has no effect on the output.
Here's my code to draw pie chart:
<script type="text/javascript">
$(document).ready(function(){
// Some data that is to be shown on the pie chart. It should be an array of numbers.
var data = [6.3, 2.1, 1.1, 3.2, 7.4, 10.5, 5.3, 27.4, 1.1, 4.2];
var labels = ['Data Loggers 6', 'Data Translation 2', 'Energy Loggers 1', 'Hobo 3', 'iButton 7', 'ICP 10', 'MCC 5', 'Monnit 26', 'Orchestrator 1', 'Sensors 4'];
for(var i = 0; i < data.length; i++)
{
labels[i] = labels[i] + ', ' + data[i] + '%';
}
var colors_arr = new Array('#00FFFF', '#7FFFD4', '#FFE4C4', '#0000FF', '#8A2BE2', '#A52A2A', '#7FFF00', '#FF7F50', '#B8860B', '#A9A9A9', '#8B008B', '#FF1493', '#228B22', '#DAA520', '#20B2AA', '#87CEFA', '#6B8E23', '#FF0000', '#FFFF00', '#F5DEB3');
var colors = new Array();
for(var i = 0; i < data.length; i++)
{
colors[i] = colors_arr[i];
}
// Create the Pie chart
var pie = new RGraph.Pie({
id: 'report_prospects_qty_products_canvas' ,
data: data,
options: {
labels: {
self: labels,
sticks: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
},
tooltips: {
self: labels,
//event: 'onmousemove',
},
shadow: false,
strokestyle: 'transparent',
title: {
self: 'Products',
bold: false,
y: 10
},
radius: 70,
colors: colors,
text: {
size: 8,
color: "red",
angle: 45
},
},
}).roundRobin();
$('#report_prospects_qty_products_wrapper').mouseout(function(){
// Hide the tooltip
RGraph.hideTooltip();
// Redraw the canvas so that any highlighting is gone
RGraph.redraw();
});
});
</script>
HTML
<!-- Put this where you want the chart to show up: -->
<div id="cvs_wrapper">
<!-- An example of using CSS to resize the canvas tag. -->
<canvas id="report_prospects_qty_products_canvas" width="600" height="250" style="width:100%;">[No canvas support]</canvas>
</div>
Output:
To fix labels clashing issue, I am using following option:
options: {
labels: {
self: labels,
sticks: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
},
According to RGraph docs:
labels.sticks Stipulates that sticks for the labels are shown. This
can also be an array of stick lengths - which may be useful if you're
experiencing the labels clashing. Default: false
FYI, I am using // version: 2015-05-24

Answer 1

Judging by the configuration snippet that you posted then I'm guessing that you might be using an older version. The current version (5.0 at this time) uses a far better way of arranging labels so there's no clashing (unless you have oodles of labels).
There's a demo page that shows this new method quite nicely here:
https://www.rgraph.net/demos/pie-basic.html
And the code for this is no different to what you might be used to:
labels = [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ];
new RGraph.Pie({
id: 'cvs',
data: [20,1,1,1,1,1,1],
options: {
tooltips: labels,
labels: labels,
shadow: false,
colorsStroke: 'rgba(0,0,0,0)',
exploded: 0
}
}).roundRobin();