Accumulation chart

[Karthikeyan]

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]

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' } 

  ]; 

 

 

Sample: https://stackblitz.com/edit/angular-b7s9jy-of3slp?file=app.component.ts 

 

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, 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/modified_sample-1580712656.zip 

 

UG: https://ej2.syncfusion.com/angular/documentation/accumulation-chart/getting-started/ 

 

Hope this helps. 

 

Regards, 

Kalai. 

 

[Karthikeyan]

Hi kalai,

              My problem got solved and thanks for your response.

Regards,

Karthikeyan .p

[Kalaimathi Chellaiah]

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.