Dynamic chart series with ngFor does not re-render.

[Akshay Rana]

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>

[Kalaimathi Chellaiah]

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

 

Sample: https://stackblitz.com/edit/angular-hehuvj-x7w9al?file=app.component.html 

 

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. 

[Akshay Rana]

Hi,

Thanks for your response.

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

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

[Kalaimathi Chellaiah]

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.  

 

Feedback Link https://www.syncfusion.com/feedback/7941/ 

 

The fix will be available in our upcoming weekly patch release which scheduled to be rolled out August 13^th , 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. 

[Kalaimathi Chellaiah]

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 3^rd, 2019. We appreciate your patience until then. 

 

Let me know, if you have any concerns. 

 

Regards, 

Kalai. 

[Kalaimathi Chellaiah]

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.  

   

Npm Packages: https://www.npmjs.com/~syncfusionorg 

   

Sample: https://stackblitz.com/edit/angular-zzaiqi-fys5dn?file=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,  

Kalai.  

[Kumaresan]

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

[Durga Gopalakrishnan]

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. 

Feedback Link :  https://www.syncfusion.com/feedback/33122/chart-data-binding-is-not-working-with-ngfor 

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. 

Sample : https://stackblitz.com/edit/angular-zzaiqi-hbnrwt 

Please revert us if you have any concerns. 

Regards, 

Durga G 

[Durga Gopalakrishnan]

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.

[Vinit Pal]

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>

[Nishanthi Panner Selvam]

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