Label format in accumulation chart

Hello, I would like to know if labelFormat could be used in the accumulation chart.
Regards

1 Reply

SM Srihari Muthukaruppan Syncfusion Team November 27, 2019 08:38 AM UTC

Hi Alex, 
 
Greetings from Syncfusion. 
 
We have analyzed your query. From that, we suggest you to use below methods to achieve your requirement. Please find the methods below  
 
Method #1: 
We have analyzed your query. From that, we can achieve your requirement by using “name” property in datalabel of series in accumulation chart. Based on that we have prepared a sample for your reference. Please find below code snippet, screenshot and sample. 
 
 
Code Snippet: 
series: [ 
            { 
                dataSource: [ 
                    { 'x': 'Chrome', y: 37, text: '37%' }, { 'x': 'UC Browser', y: 17, text: '17%' }, 
                    { 'x': 'iPhone', y: 19, text: '19%' }, 
                    { 'x': 'Others', y: 4, text: '4%' }, { 'x': 'Opera', y: 11, text: '11%' }, 
                    { 'x': 'Android', y: 12, text: '12%' } 
                ], 
                dataLabel: { 
                    visible: true, position: 'Inside', name: 'text', font: { fontWeight: '600' } 
                }, 
                radius: '70%', xName: 'x', yName: 'y', startAngle: 0, endAngle: 360, innerRadius: '0%', 
                explode: true, explodeOffset: '10%', explodeIndex: 0, name: 'Browser' 
            } 
        ], 
 
Screenshot: 
 
 
 
Method #2:  
You can also achieve your requirement by using the “textRender” event in Accumulation chart . We have also attached the code snippet for your reference. Please find the below screenshot and code snippet. 
 
 
Code Snippet: 
 
        series: [ 
            { 
                dataSource: [ 
                    { x: "Chrome", y: 37 }, 
                    { x: "UC Browser", y: 17 }, 
                    { x: "iPhone", y: 19 }, 
                    { x: "Others", y: 4 }, 
                    { x: "Opera", y: 11 }, 
                    { x: "Android", y: 12 } 
                ], 
                dataLabel: { 
                    visible: true, position: 'Inside' 
                }, 
                radius: '70%', xName: 'x', yName: 'y', startAngle: 0, endAngle: 360, innerRadius: '0%', 
                explode: true, explodeOffset: '10%', explodeIndex: 0, name: 'Browser' 
            } 
        ], 
        textRender: (args: IAccTextRenderEventArgs) => { 
          args.text = args.text + "%"; 
          }, 

Screenshot: 
 
 
Let us know if you have any concerns. 

Regards, 
Srihari 


Loader.
Up arrow icon