My apexcharts are starting zoomed in and I cant find the reason why, explored the documentation already but found nothing about that.

When the page loads it comes out like this:

And when I click the home buttom it shows how it is supposed to:

Is there any way for it to load the right way from the beggining? Heres the code:

echo "<p><script>"."new ApexCharts(document.getElementById('Indicadores_Preco_$tickerb'), {chart: {type: 'line',width: 700,height: 500,zoom:{autoScaleYaxis: true}},series: [{name: 'PL', data: $pl},{name: 'VPA', data: $vpa},{name: 'PVPA', data: $pvpa},{name: 'LPA', data: $lpa}],legend:{position:'bottom',fontFamily: 'Arial, Helvetica, sans-serif', fontSize: '15px'},yaxis: {labels:{align: 'center',style: {fontFamily: 'Arial, Helvetica, sans-serif', fontSize: '15px', fontWeight:undefined, color: '#000000'}}},xaxis: {categories: $anos,labels:{align: 'center',offsetY: 10,rotate: -45, rotateAlways: true, style: {fontFamily: 'Arial, Helvetica, sans-serif', fontSize: '15px', fontWeight:undefined, color: '#000000'}}},title: {text: 'Indicadores Preço', align: 'center', style: {fontFamily: 'Arial, Helvetica, sans-serif', fontSize: '25px', fontWeight:'bold', color: '#000000'}, margin: 20}}).render();</script></p>";                            

Im echoing because it repeats the script for multiple times, but tested directly into HTML and the error continues.