Chart JS not working with large dataset but when I have small amount of data chart is working fine

I am using chart js in LWC and I have data which have more than 3000 records and more than 500 labels.

`

getData() {
            labels: this.uniqueLabels,
            datasets: data: this.data,
           
    }

getScales() {
        this.scalesProps = {
            yAxes: [{
                gridLines: {
                    display:false
                },
                scaleLabel: {
                    display: true,
                    
                },
                ticks: {
                    fontSize: 14,
                    fontColor: '#000',
                    fontStyle: "bold",
                    beginAtZero: true,
                  },
                  maxBarThickness: 30,
            }],
            xAxes: [{
                gridLines: {
                    display:true
                },
                scaleLabel: {
                    display: true,
                    
                },
                ticks: {
                    beginAtZero: true,
                    fontSize: 14,
                    fontColor: '#000',
                    fontStyle: "bold"
                }
            }],
 
        }

`

this.data have 4000 records and this.uniqueLabels have 2500 records But when the chart is not rendered showing something like this (Plz refer attchaed image)

Chart JS Image

Nothing will be rendered and shows something sad emoticon.

but when I open console through inspect in browser and then reload the chart rendered properly. Also If i have samll data like around 1000 records charts work properly. Plese help me with this.

I am expecting that chart will rendered smoothly witout any restriction on amount of data to be display.