We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Accumulation chart

Thread ID:

Created:

Updated:

Platform:

Replies:

145099 Jun 6,2019 01:36 PM UTC Jun 7,2019 07:04 AM UTC Angular - EJ 2 3
loading
Tags: Chart
Karthikeyan
Asked On June 6, 2019 01:36 PM UTC

Dear sir,
               I  tried accumulation control  for creating chart with 11 data set.But 11th data set color that means(green color)want to change. Here I attached the sample project for your reference. Please give the instructions how to change color for 11th data set and data labels,legend settings not visible on my view.

Regards,
Karthikeyan p

Attachment: samplechart_71ec8c2d.zip

Kalaimathi Chellaiah [Syncfusion]
Replied On June 7, 2019 06:07 AM UTC

Hi Karthikeyan, 
 
Greetings from Syncfusion. 
 
We have analysed your query with attached sample. Please find following solution for queries, 
 
Query #1: how to change color for 11th data set? 
 
We can achieve this requirement in different ways.  
 
PointRender Event: 
 
By using pointRender event we can get the point index and fill properties. Based on point index we can change point fill color. Please find below code snippet, 
 
[app.component.html]: 
<ejs-accumulationchart id="container" #pie style='display:block;  width: 92%'  
 (pointRender)='pointRender($event)'> 
//other configurartions here 
  </ejs-accumulationchart> 
 
[app.component.ts]: 
public pointRender(args: IAccPointRenderEventArgs): void { 
    if(args.point.index == 10){ 
        args.fill = "blue" 
      } 
}; 
 
 
Screenshot: 
 
pointColorMapping: 
 
Our chart contains property poinColorMappingName to map the field from data source for point fill color. Consider the below code snippet.  
 
Code Snippet: 
[app.component.html]: 
<e-accumulation-series-collection> 
      <e-accumulation-series name='Project' [dataSource]='data' xName='x' yName='y' pointColorMapping='fill'> 
      </e-accumulation-series> 
 
[app.component.ts]: 
public data: Object[] = [{ x: 'Labour', y: 18, text: '18%' }, { x: 'Legal', y: 8, text: '8%' }, 
  { x: 'Production', y: 15, text: '15%' }, { x: 'License', y: 11, text: '11%' }, 
  { x: 'Facilities', y: 18, text: '18%' }, { x: 'Taxes', y: 14, text: '14%' }, 
  { x: 'Insurance', y: 16, text: '16%' },{ x: 'Insurance', y: 16, text: '16%' }, 
  { x: 'Insurance', y: 16, text: '16%' },{ x: 'Insurance', y: 16, text: '16%' }, 
  { x: 'Insurance', y: 16, text: '16%', fill:'red' } 
  ]; 
 
 
 
Query #2: Data labels,legend settings not visible on my view? 
 
We have analysed this query in your sample. From that, the issue is occurred due to legend and datalabel module not injected. If you want to use legend and dataLabel, then you should inject AccumulationLegendService, AccumulationDataLabelService (Or) AccumulationAllModule instead of AccumulationModule  in module.ts file.  We have modified attached sample as per your requirement. Please find below sample, 
 
 
 
Hope this helps. 
 
Regards, 
Kalai. 
 


Karthikeyan
Replied On June 7, 2019 06:52 AM UTC

Hi kalai,
              My problem got solved and thanks for your response.

Regards,
Karthikeyan .p

Kalaimathi Chellaiah [Syncfusion]
Replied On June 7, 2019 07:04 AM UTC

Hi Karthikeyan, 
 
Most welcome. Kindly get in touch with us, if you would require further assistance. We are always happy in assisting you.   
   
Thanks,   
Kalai.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon