Label format in accumulation chart

[Alex Siler]

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

[Srihari Muthukaruppan]

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. 

 

Sample: https://stackblitz.com/edit/96kvtr?file=index.ts 

 

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. 

 

Sample: https://stackblitz.com/edit/tyiuau?file=index.ts 

 

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