Pie Chart without legends and with data labels

Question

I'm working with a Pivot Client that shows a Pie Chart.

Here's the sample code:

http://jsplayground.syncfusion.com/fordpqmq

Currently, the chart has a legend that shows the values of one of the fields of the data. I want to hide the legend (I already figured out how to do that), but show these values as labels in the pie chart itself. How do I do that?

Sastha Prathap Selvamoorthy · Answer

Hi Pedro, 
 
Thank you for contacting Syncfusion support. 
 
You simply use the “annotations” option to display the legend text in respective chart series in PivotClient. Please find the sample code snippet and screen shot for your reference below. 
 
Sample Code: 




$(function () { 
    $("#PivotClient").ejPivotClient({ 
        ///…, 
       chartType: 'pie', 
        title: "Relational Browser", 
        renderSuccess: "setChartProperties", 
       displaySettings: { 
            mode: 'chartonly', 
       } 
   }); 
}); 
function setChartProperties(args) { 
    if (args._successAction == undefined || args._successAction == "Filter") { 
        this._pivotChart.model.legend.visible = false; 
        this._pivotChart.model.load = function (args) { 
            var annotations = []; 
            if (!ej.isNullOrUndefined(this.model.series) && this.model.series.length == 1) { 
                $(this.model.series[0].dataSource).each(function (index, item) { 
                    var iDiv = document.createElement('div'); iDiv.id = 'label_' + index; 
                   iDiv.textContent = item.xValues; 
                    document.getElementsByTagName('body')[0].appendChild(iDiv); $("#" + iDiv.id).css("display", "none"); 
                    annotations.push({ visible: true, content: iDiv.id, coordinateUnit: "points", x: index, verticalAlignment: "top" }); 
                }); 
            } 
           this.model.annotations = annotations; // you can add the annotations here 
        } 
    } 
} 
 
Screenshot: 
  
 
We have modified the provided JSPlayground link with above information for your convenience. Please find the link below. 
 
http://jsplayground.syncfusion.com/oxu2b3vg  
 
Also, we have provided detailed information for “annotations” option in our online document link below for your reference. 
 
Online Document: https://help.syncfusion.com/api/js/ejchart#members:annotations  
 
Regards, 
Sastha Prathap S.