Mis gráficos de ápices están comenzando a acercarse y no puedo encontrar la razón por la cual, ya exploré la documentación pero no encontré nada al respecto.

Cuando se carga la página sale así:

Y cuando hago clic en el botón de inicio, muestra cómo se supone que debe hacerlo:

¿Hay alguna forma de que se cargue correctamente desde el principio? Aquí está el código:

 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>";

Estoy haciendo eco porque repite el script varias veces, pero se probó directamente en HTML y el error continúa.