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. Image for the cookie policy date

Dynamic chart series with ngFor does not re-render.

I have some data like :

chartData = [
{... , values: [{x: 'x', y: 'y', value: '10'}, {x: 'x', y: 'y', value: '20'} .....] },
{... , values: [{x: 'x', y: 'y', value: '10'}, {x: 'x', y: 'y', value: '20'} .....] },
...
]


I want to create a stackingColumn chart with each element in the array as a series.
It works fine, but on ngOnChanges, when I re-assign to chart data, chart does not update. I tried manually calling changeDetectorRef.markForCheck(), 
doesn't help.


One way I am able to do it by calling removeSeries() and then addseries() whenever data is updated.
Is there any better way to achieve this? And why is the data not re-rendering?

<ejs-chart #chart id="chart-container"         ...>
<e-series-collection>
<e-series *ngFor="let chart of chartData; let i = index"
[dataSource]="chart.values"
type='StackingColumn'
xName="time"
yName="value"
[cornerRadius]='radius[i]'
[name]="chart.name" [marker]="marker">
</e-series>
</e-series-collection>
</ejs-chart>

10 Replies

KC Kalaimathi Chellaiah Syncfusion Team August 1, 2019 12:22 PM UTC

Hi Akshay, 
 
Greetings from Syncfusion. 
 
We have analyzed your query. We have prepared a sample based on your requirement. In that we have tried to replicate the reported scenario at our end. Unfortunately, we are unable to reproduce the reported issue. We have changed the chart data source using button click. In that data is updated properly. Please find below sample and screenshot, 
 
Screenshot: 
Initial Rendering 
After Button Click 
 
 
 
 
Since we are not aware of your exact scenario which the issue is reproduced. So 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 your sample (or) code snippet with full configurations.

  • Share the details if you have done any other customization in your sample.
 
  • Share your dataSource file

 
Regards, 
Kalai. 



AR Akshay Rana August 1, 2019 12:34 PM UTC

Hi,

Thanks for your response.

It doesn't work if I re assign to chartData.

https://stackblitz.com/edit/angular-hehuvj-vftmxh


KC Kalaimathi Chellaiah Syncfusion Team August 2, 2019 09:43 AM UTC

Hi Akshay, 
 
Sorry for the inconvenience. 
 
We were able to reproduce the issue Dynamic chart series with ngFor does not re-render and we confirm this as a bug and logged a defect report .You can keep track of the bug from the feedback portal below.  
 
 
The fix will be available in our upcoming weekly patch release which scheduled to be rolled out August 13th , 2019.  
 
If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.  
  
Regards, 
Kalai. 



KC Kalaimathi Chellaiah Syncfusion Team August 29, 2019 05:22 AM UTC

Hi Akshay, 
 
Sorry for the inconvenience. 
 
Due to some technical issues, we couldn’t include the fix on specified time. So we will move this fix our next patch release which is scheduled to be rolled out on or before September 3rd, 2019. We appreciate your patience until then. 
 
Let me know, if you have any concerns. 
 
Regards, 
Kalai. 



KC Kalaimathi Chellaiah Syncfusion Team September 16, 2019 05:56 AM UTC

Hi Akshay,  
  
Thanks for being patience. 
 
We are glad to announce that our v17.2.49  patch release is rolled out, we have added the fix for the reported issue and is available for download under the following link.  
   
   
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.  
  
Regards,  
Kalai.  




KU Kumaresan March 1, 2022 06:13 PM UTC

Hi team,


sample sample not working in latest packages


simply changed all packages to * in your sample


https://stackblitz.com/edit/angular-zzaiqi-q1uly4?file=package.json



DG Durga Gopalakrishnan Syncfusion Team March 2, 2022 04:01 PM UTC

Hi Kumaresan, 

We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our upcoming Volume 1 Main Release which is expected to be rolled out at end of March 2022. We appreciate your patience until then. You can keep track of the bug from the below feedback link. 


If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 

Meanwhile, we request you to use chart refresh method to update the chart data. We have attached the modified sample for your reference. 


Please revert us if you have any concerns. 

Regards, 
Durga G 




DG Durga Gopalakrishnan Syncfusion Team May 19, 2022 06:47 AM UTC

Hi Kumaresan,


We are glad to announce that our Essential Studio 2022 Volume 1 SP release v20.1.0.55 is rolled out; we have added the fix for reported issue and is available for download under the following link.


Essential Studio 2022 Volume 1 Service Pack Release v20.1.0.55 is available for download | Announcements Forums | Syncfusion


Sample :  https://stackblitz.com/edit/angular-39rf3t?file=app.component.html,app.component.ts


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.


Regards,

Durga Gopalakrishnan.



VP Vinit Pal May 26, 2023 12:14 PM UTC

Hi Team,


Facing issue with multi series line chart  "Dynamic chart series with ngFor does not re-render". i have added series dynamically in dataSource but wile applying ngFor on <e-series></e-series> line chart is not rendered.

My e-series collection are as follows.

<e-series-collection>
                        <e-series *ngFor="let chart of  selectedMatrix; let i = index" [dataSource]='dataValues' type='MultiColoredLine' segmentAxis='Y' width="2"
                            xName='XValue' yName='AQI' name='AQI'  [segments]='segments'>
                        </e-series>
                </e-series-collection>




NP Nishanthi Panner Selvam Syncfusion Team May 29, 2023 09:12 AM UTC

Hi Vinit,


We have analyzed your query, based on that we created a multiColoredLine chart by adding series dynamically in dataSource using ngFor for your reference.


Please find the sample , code-snippet, and screen-shot for your reference.


<e-series-collection>

      <e-series *ngFor="let chart of chartData;"

              [dataSource]="chart.values"

              type='MultiColoredLine'

              xName="x"

              yName="y"

              [segments]='segments'

              segmentAxis='Y'

             >

      </e-series>

   </e-series-collection>

public segments: Object[] = [{

      value: 2000,

      color: 'green'

  }, {

      color: 'blue'

  }];



Sample: https://stackblitz.com/edit/angular-39rf3t-gzxtvh?file=app.component.html,app.component.ts,environments%2Fenvironment.ts


If you are still facing problem, please try to replicate an issue in attached sample or share us issue reproduced sample so that it will be helpful to validate this case further. Kindly revert us if you have any concerns.


Regards,

Nishanthi



Loader.
Live Chat Icon For mobile
Up arrow icon