Label format in accumulation chart

Thread ID:	Created:	Updated:	Platform:	Replies:
149446	Nov 26,2019 05:59 PM UTC	Nov 27,2019 08:38 AM UTC	JavaScript - EJ 2	1

Subscribe to this post

Tags: Chart

Alex Siler

Asked On November 26, 2019 05:59 PM UTC

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

Reply | Reply with quote

Srihari Muthukaruppan [Syncfusion]

Replied On 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.

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

Reply | Reply with quote

Label format in accumulation chart

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US