Line chart disappearing in few seconds

[akrish70]

Expected behavior

Chart is expected to be dispalyed

Current behavior

Charts are hiding in few seconds, im able to see the line chart like the flash

Reproducible sample

Displaying the chart in a loop

Optional extra steps/info to reproduce

Im using angular 14, in my application im displaying a table of charts each and every row will display different types of chart in loop, where as one row of chart is alone vanishing just like that in few seconds

Possible solution

No response

Context

No response

chart.js version

4.4.0

Browser name and version

chrome

Link to your project

No response

[LeeLenaleee]

As per the issue template a reproducible sample is required, without it we can't help you. If I look at our documentation the charts don't disappear so this behavior is currently not reproducible for me

[akrish70]

This is my html code:

<ng-container *ngIf="chartData.length > 0; else loadGif">
                <ng-container *ngFor="let graph of chartData;let i=index">
                    <td>
                        <div class="thumb_show">
                            <img class="thumb_pic" src="{{GetThumbImage(PrgsResponse[i],0)}}">
                        </div>
                        <div [ngStyle]="chartResize()">
                            <canvas #chart></canvas>
                        </div>
                    </td>

                </ng-container>
            </ng-container>

Where i will be calling the api call in ngoninit this.service.data(params).subscribe((chartResponse: any) => { this.chartData= chartResponse; this.SetChartGraph(); }); in the SetChartGraph method will be doing some buisness logic and will be setting up the data for the charts, Finally will load the data post these operations in ngafterviewinit within the seinterval block @ViewChildren('chart') chart: QueryList<ElementRef>;

ngAfterViewInit() {
    setTimeout(() => {
        this.chart.forEach((canvas, index) => {
            // console.log(canvas, 'canvas');
            const context = canvas.nativeElement.getContext('2d');
            const chartData = this.chartData[index];
            // Create a new chart instance for each canvas element
            const timing = new Chart(context, {
                type: chartData.type,
                data: chartData.data,
                options: chartData.options,
            });
        });
}, 5000)

} so when i increase the timing of the settimeout, im able to see the graph but it is taking plenty of time to load the chart. but when i give very minimal time the chart is showing for few seconds and just vanishing off in 3 to 5seconds