data labels in Pie Chart

Question

Hi support,I have a problem about the pie chart rendering. When i try to set the outside labels position, the labels are not showing at all, like the picture i attaced.Is it possible to set the graph to automatically render in the content area to always show all labels text?a note:I created the graph first with no data, and update series points later (it's a real time application and I recive data always after graph creation).thanksbest regardsAttachment: piechart_253fb930.7z

Dharanidharan Dharmasivam · Answer

Hi Marco, 
 
Greetings from Syncfusion. 
 
We have analyzed your query. If you wish the full text of data label to be viewed, then you can specify the enableSmartLabels property of the series to true, so that the labels which exceeds the chart area will be trimmed and tooltip will be shown once hovered over the trimmed text. By default, for pie type series the enableSmartLabels property will be true and we suspect that it will be false at your end. So, you can change this to true. 
 
We have prepared a sample in which we have bind data to chart in a button click event. Find the code snippet below to achieve this. 
 




 
<input type='button' onclick='updateChart()' value='Update Chart' /> 
 
$("#container").ejChart({ 
            series: [{ 
                    //... 
                    enableSmartLabels:true 
                }], 
  });       
 
function updateChart(){ 
        var chart = $("#container").ejChart("instance"); 
        chart.model.series[0].points = [{ x: '07.22 (30)%', y: 30, text: '07.22 (30)%' }, 
                                                           //... 
                                                          ]; 
        chart.redraw(); 
    } 
 
 
Screenshot:  
  
 
Sample for reference can be find from below. 
https://jsplayground.syncfusion.com/upurqpob  
 
For more information on smart labels, find the user guide. 
 
Thanks, 
Dharani.

Marco · Answer

Hi Dharani,i tried to use the enableSmartLabel option when creating the chart. It works, but I keep noticing problems, because not all labels are displayed (you can view it in this screen)screen1: missing the black slice labelscreen2: all labels are displayedAnother thing is: my view mask is not user interactive, so user can't use mouse or touch to show label tooltip. Is there a way to automatically force pie size and show the entire label? (I've already tried to use enableWrapping on dataLabel settings but I always have some labels that overflows the chart content area).I attach you the example creation code of my chart.Thank youbest regardsAttachment: piechart_534086.7z

Dharanidharan Dharmasivam · Answer

Hi Marco,

We have analyzed your query. To overcome the reported scenario, you can use any of the below solutions.

Method 1: Placing the data label inside the chart.

Here you can place the data label inside the chart and need to specify the enableSmartLabels property to false, so that the labels will be visible. Find the code snippet below to achieve this.

$("#container").ejChart({

series: [{

//...

labelPosition: "inside",

enableSmartLabels: false,

}]

});

Screenshot:

Sample for reference can be find from below link.

https://jsplayground.syncfusion.com/l3k0cb1y

Method 2: Changing the size of the pie

Using the pieCoefficient property, you can control the size of pie which ranges from 0 to 1. By default, pieCoefficient will be 0.8 and you can reduce the size, also enableSmartLabels property need to be false. Find the code snippet below.

$("#container").ejChart({

series: [{

//...

pieCoefficient: 0.6

enableSmartLabels: false,

}]

});

Here we have specified the pieCoefficient to 0.6, you can change this with respect to your requirement.

Screenshot:

Sample for reference can be find from below link.

https://jsplayground.syncfusion.com/i3pvnnd3

Thanks,

Dharani.