Multiple same chart on a Page - not loading correctly.

I am using a Sparkline chart inside a angular component, which is loaded multiple times on a web page.

Id is getting generated dynamically  as a unique random string. but only one widget gets load. initially, than i do something on webpage like (click f12) than it gets load

Sometimes error its giving 

2core.js:4197 ERROR TypeError: Cannot read property 'id' of null

    at SparklineComponent.removeSvg (ej2-charts.es2015.js:44098)

    at SparklineComponent.createSVG (ej2-charts.es2015.js:44083)

    at ej2-charts.es2015.js:44170

    at ZoneDelegate.invokeTask (zone-evergreen.js:399)

    at Object.onInvokeTask (core.js:27428)

    at ZoneDelegate.invokeTask (zone-evergreen.js:398)

    at Zone.runTask (zone-evergreen.js:167)

    at invokeTask (zone-evergreen.js:480)

    at ZoneTask.invoke (zone-evergreen.js:469)

    at timer (zone-evergreen.js:2552)


Component:-

    <ejs-sparkline id='{{inLineContainerId}}' valueType='{{valueType}}' [tooltipSettings]="" type='{{kpiChartType}}' fill='{{fillColor}}'
            [dataSource]="data" xName='{{xval}}' yName='{{yval}}'>
        </ejs-sparkline>


id value in constructor

constructor() {
        this.inLineContainerId`WidgetElementId${UUID.UUID()}`;
        this.bottomContainerId`WidgetElementId${UUID.UUID()}`;
    }



1 Reply

DV Duraimurugan Vedagiri Syncfusion Team June 23, 2021 01:46 PM UTC

Hi Manoj,

Thanks for contacting syncfusion support.

We have analyzed the reported query - "Page not loading correctly when has multiple sparkline charts" but unable to reproduce at our end. However, we have prepared a sample based on your requirement.

https://stackblitz.com/edit/angular-oa3yvf?file=app.component.html  

Could you please modify the above provided sample to replicate the reported issue and send it to us? It will be more helpful for us to analysis further and provide you with a solution.

Regards,
Durai Murugan V 


Loader.
Up arrow icon