How to fix labels clashing problem in RGraph pie chart?

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();