1. Home
  2. Forum
  3. Angular - EJ 2
  4. Manually redrawing a pie chart on Angular 8

Manually redrawing a pie chart on Angular 8

Hello!

There is a theme service in our Angular application which would toggle the application theme to dark/light mode using CSS variables. 

Even though I put the CSS variable name as the color name in Label and Legend models, they are not updated automatically on theme change. But if the chart resizes, it redraws itself automatically and then the colors are updated. 

Is there a way to manually redraw a pie chart (not refresh) using a view child reference so I can update the colors on refresh?

HTML

  #donutContainer
  id="donut-container"
  [legendSettings]='legendSettings'
  [margin]="margin"
>
 
   
      [xName]='xName'
      [yName]='yName'
      [type]='type'
      [dataSource]='data'
      [dataLabel]="dataLabel"
    >
   
 

TypeScript

@ViewChild('donutContainer', {static: false}) donutChart: ChartComponent | undefined;

  dataLabel = {
    visible: true,
    position: 'Outside',
    color: 'var(--font-primary-header-color)'
  };

  legendSettings: LegendSettingsModel = {
    visible: true,
    position: 'Right',
    textStyle: {
      size: '14px',
      color: 'var(--font-primary-header-color)'
    }
  };

Thank you in advance.

3 Replies
SM Srihari Muthukaruppan Syncfusion Team February 21, 2020 12:42 PM UTC

Hi Dish, 
 
We have analyzed your query. From that, we would like to let you know that the donut chart is working fine. We have also tried to reproduce the reported scenario using the css style for datalabel and legend settings in angular 8 version. Unfortunately we are unable to reproduce the reported scenario. We have also attached the sample used for testing. Please find the below sample, code snippet and screenshot 
   
  
Code Snippet:  
app.component.ts: 
// add your additional code here 
    public dataLabel = { 
        visible: true, 
        position: 'Outside', 
        font: {color: 'var(--font-primary-header-color)'} 
      }; 
    public legendSettings: object = { 
        visible: true, 
        position: 'Right', 
        textStyle: { 
          size: '14px', 
          color: 'var(--font-primary-header-color)' 
        } 
      }; 

app.component.css: 
:root { 
    --font-primary-header-color:  #FF0000; 
  } 
 
app.component.html: 
 
<ejs-accumulationchart id="container" #pie style='display:block;  width: 92%' [legendSettings]="legendSettings" > 
    <e-accumulation-series-collection> 
        <e-accumulation-series [dataSource]='data' xName='x' yName='y' [startAngle]="startAngle" [endAngle]="endAngle" innerRadius="40%" 
            radius="70%" [dataLabel]="dataLabel" > 
        </e-accumulation-series> 
    </e-accumulation-series-collection> 
</ejs-accumulationchart> 

 
Screenshot: 
 
 
If you still face this issue. Please share the following information which will be more helpful for further analysis and provide you the solution sooner.  

  • Try to reproduce the reported scenario in the above sample

  • Please share the details of the package version used.

  • Share the details if you have done any other customization in your sample.
 
Let us know if you have any concerns. 
  
Regards, 
Srihari M 


DI Dish February 26, 2020 08:16 AM UTC

Thank you Srihari! It works perfectly! 

I have another question if you don't mind. I'm setting a value for the innerRadius property to make a donut chart but that value is getting applied to the Legend Shapes as well. So there is a small white dot inside legend shapes. Is there a way to disable the innerRadius  only for Legend Shapes?

SM Srihari Muthukaruppan Syncfusion Team February 27, 2020 08:59 AM UTC

Hi Dish, 
 
We have analyzed your query. From that, we would like to let you know that we can achieve your requirement by setting “loaded” event in the chart as mentioned in the below code snippet. Based on your requirement we have prepared a sample for your reference. Please find the below sample, code snippet and screenshot. 

 
Code Snippet:   
App.component.html: 
 
     <ejs-accumulationchart id="container" #pie style='display:block;  width: 92%'  (loaded)='loaded($event)'> 
    // add additional code here    
    </ejs-accumulationchart> 
 
App.component.ts: 
  
     // add additional code here   
    public loaded(args: IAccLoadedEventArgs): void { 
        for (let i = 0; i < args.accumulation.visibleSeries[0].dataSource['length']; i++) { 
          const marker = document.getElementById('container_chart_legend_shape_marker_' + i); 
          const stroke = marker.getAttribute('stroke'); 
          marker.setAttribute('fill', stroke); 
        } 
    } 
 // add additional code here   
  
Screenshot: 
 
 
Let us know if you have any concerns. 

Regards, 
Srihari M 


Loader.
Up arrow icon