jQWidgets Forums

jQuery UI Widgets › Forums › Chart › Pie chart label clutter and overlapping on each other. › Reply To: Pie chart label clutter and overlapping on each other.

February 27, 2015 at 12:53 pm Pie chart label clutter and overlapping on each other. #67805

Dimitar
Participant

Hi hellosuresh,

This is a normal situation with so many slices in the pie chart. There is something else you can try – moving the labels to the chart legend, e.g.:

<!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 () {
         // prepare chart data as an array
         var source =
         {
             datatype: "csv",
             datafields: [
                 { name: 'Browser' },
                 { name: 'Share' }
             ],
             url: '../sampledata/mobile_browsers_share_dec2011.txt'
         };

         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: "Mobile browsers share",
             description: "(source: wikipedia.org)",
             enableAnimations: true,
             showLegend: true,
             showBorderLine: true,
             legendLayout: { left: 650, top: 160, width: 300, height: 200, flow: 'vertical' },
             padding: { left: 5, top: 5, right: 5, bottom: 5 },
             titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
             source: dataAdapter,
             colorScheme: 'scheme03',
             seriesGroups:
                 [
                     {
                         type: 'pie',
                         showLabels: true,
                         series:
                             [
                                 {
                                     dataField: 'Share',
                                     displayText: 'Browser',
                                     labelRadius: 170,
                                     initialAngle: 15,
                                     radius: 145,
                                     centerOffset: 0,
                                     formatFunction: function (value) {
                                         if (isNaN(value))
                                             return value;
                                         return parseFloat(value) + '%';
                                     },
                                     legendFormatFunction: function (value, index) {
                                         return value + ' - ' + dataAdapter.records[index].Share + '%';
                                     }
                                 }
                             ]
                     }
                 ]
         };

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

Best Regards,
Dimitar

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