jQuery UI Widgets › Forums › Chart › Pie Chart Labels are not displayed properly

Tagged: , , , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 8 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Pie Chart Labels are not displayed properly Posts
  • May 16, 2016 at 1:01 pm Pie Chart Labels are not displayed properly #84394

    Ranjith Kumar
    Participant

    hi,

    In Pie Chart if two values having very less count , then the label’s displayed with overlapping with each other, we are not able to see the content of a labels,

    For Example: we have 3 counts like count1-98%,count2-1%,count3-1%

    Here the count2 and Count3 labels are overlapping with each other, Not able to read the label

    Is there any solution to set the labels without overlap, Is there any solution for it?

    Thanks In Advance

    May 17, 2016 at 5:01 am Pie Chart Labels are not displayed properly #84407

    Dimitar
    Participant

    Hi Ranjith Kumar,

    We suggest you make the pie series labelRadius larger than its radius, as shown in the following example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            var data = [{ name: 'count1', value: 98 }, { name: 'count2', value: 1 }, { name: 'count3', value: 1 }];

            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name' },
                    { name: 'value' }
                ],
                localdata: data
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

            // prepare jqxChart settings
            var settings = {
                title: "Desktop browsers share",
                description: "(source: wikipedia.org)",
                enableAnimations: true,
                showLegend: false,
                showBorderLine: true,
                legendPosition: { left: 520, top: 140, width: 100, height: 100 },
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                colorScheme: 'scheme02',
                seriesGroups:
                    [
                        {
                            type: 'pie',
                            showLabels: true,
                            series:
                                [
                                    {
                                        dataField: 'value',
                                        displayText: 'name',
                                        labelRadius: 190,
                                        initialAngle: 15,
                                        radius: 170,
                                        centerOffset: 0,
                                        formatSettings: { sufix: '%', decimalPlaces: 1 }
                                    }
                                ]
                        }
                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width: 500px; height: 500px;">
    </div>
</body>
</html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    May 19, 2016 at 6:51 am Pie Chart Labels are not displayed properly #84473

    Ranjith Kumar
    Participant

    Thanks jQWidgets team for reply,

    the above solution is working perfectly fine for the large numbers like(1,2,..,5,10,…….100),

    we are having radius 190 and labelRadius 220 still issue exist for float numbers

    I have data like

    var data = [{ name: ‘high alerts’, value: 99.94 }, { name: ‘medium Alerts’, value: 0,04 }, { name: ‘Low Alerts’, value: 0,02 }];

    the values are overlapping with each other by giving this data(Please check this in above example)

    Thanks In Advance

    May 20, 2016 at 5:15 am Pie Chart Labels are not displayed properly #84487

    Dimitar
    Participant

    Hi Ranjith Kumar,

    Unfortunately, with such small values – 0.04, 0.02 (compared to other values in the pie – 99.94), the label overlapping cannot be avoided, because both small slices are positioned virtually on the same place.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.