Pie chart label clutter and overlapping on each other. - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, clutter, label, labelRadius, labels, overlap, pie, radius

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

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Pie chart label clutter and overlapping on each other. Posts
February 25, 2015 at 2:56 pm Pie chart label clutter and overlapping on each other. #67664

hellosuresh
Participant

when showing pie chart, if having large data, labels are overlapping on each other. Is there a way to show labels in separate height, so that all label data can be visible. I didn’t find any where to upload image in forums to show how it looks like my pie chart.

Advance Thanks.

February 25, 2015 at 3:36 pm Pie chart label clutter and overlapping on each other. #67674

hellosuresh
Participant

Here is the link/

https://jsfiddle.net/jqwidgets/VAgKr/embedded/result/

February 25, 2015 at 4:03 pm Pie chart label clutter and overlapping on each other. #67675

Dimitar
Participant

Hello hellosuresh,

In the following fiddle: https://jsfiddle.net/Dimitar_jQWidgets/rcwt6g9j/, which is the same as yours (I just changed the paths to the files so that the chart is displayed correctly), the labels do not seem to overlap. However, if you wish them to be further away from each other, you can increase the property labelRadius (e.g. to 200).

Best Regards,
Dimitar

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

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

hellosuresh
Participant

Hi Dimitar,

https://jsfiddle.net/jqwidgets/VAgKr/embedded/result/

In the above demo, can you please change source with following sampledata. Even after changing labelradius still it is cluttery.

‘var sampleData = [{
Country: ‘China’,
Population: 1347350000,
Percent: 19.18
}, {
Country: ‘India’,
Population: 1210193422,
Percent: 17.22
}, {
Country: ‘USA’,
Population: 313912000,
Percent: 4.47
}, {
Country: ‘Indonesia’,
Population: 237641326,
Percent: 3.38
}, {
Country: ‘Brazil’,
Population: 192376496,
Percent: 2.74
},{
Country: ‘China’,
Population: 1347350000,
Percent: 19.18
}, {
Country: ‘India’,
Population: 1210193422,
Percent: 17.22
}, {
Country: ‘USA’,
Population: 313912000,
Percent: 4.47
}, {
Country: ‘Indonesia’,
Population: 237641326,
Percent: 3.38
}, {
Country: ‘Brazil’,
Population: 192376496,
Percent: 2.74
},{
Country: ‘China’,
Population: 1347350000,
Percent: 19.18
}, {
Country: ‘India’,
Population: 1210193422,
Percent: 17.22
}, {
Country: ‘USA’,
Population: 313912000,
Percent: 4.47
}, {
Country: ‘Indonesia’,
Population: 237641326,
Percent: 3.38
}, {
Country: ‘Brazil’,
Population: 192376496,
Percent: 2.74
},{
Country: ‘China’,
Population: 1347350000,
Percent: 19.18
}, {
Country: ‘India’,
Population: 1210193422,
Percent: 17.22
}, {
Country: ‘USA’,
Population: 313912000,
Percent: 4.47
}, {
Country: ‘Indonesia’,
Population: 237641326,
Percent: 3.38
}, {
Country: ‘Brazil’,
Population: 192376496,
Percent: 2.74
},{
Country: ‘China’,
Population: 1347350000,
Percent: 19.18
}, {
Country: ‘India’,
Population: 1210193422,
Percent: 17.22
}, {
Country: ‘USA’,
Population: 313912000,
Percent: 4.47
}, {
Country: ‘Indonesia’,
Population: 237641326,
Percent: 3.38
}, {
Country: ‘Brazil’,
Population: 192376496,
Percent: 2.74
}
];

// prepare jqxChart settings
var settings = {
title: “Mobile browsers share in Dec 2011”,
description: “(source: wikipedia.org)”,
enableAnimations: true,
showLegend: true,
showBorderLine: true,
legendLayout: {
left: 700,
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: sampleData,
colorScheme: ‘scheme03’,
seriesGroups: [{
type: ‘pie’,
showLabels: true,
series: [{
dataField: ‘Percent’,
displayText: ‘Country’,
labelRadius: 300,
initialAngle: 15,
radius: 145,
centerOffset: 0,
formatFunction: function (value) {
if (isNaN(value)) return value;
return ‘value is’ + parseFloat(value) + ‘%’;
},
}]
}]
};

// setup the chart
$(‘#jqxChart’).jqxChart(settings);’

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/
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.