Adjunto una imagen para ejemplificar el problema. Tengo 4 elementos en la página:

• una tabla (que es un encabezado con algunos datos)
• una tabla
• una tabla debajo del gráfico (que usa etiquetas de gráfico como encabezado de tabla)
• un pie de página

Debido a que la primera table tiene solo 2 filas (y es estática), tableChart también es estático (con solo 5 filas) y el footer de página tiene solo una fila, quiero calcular dinámicamente la altura del gráfico.

Entonces, obtengo window.height (o contenedor) y disminuyo la altura de la table , la altura de tableChart y la altura del footer de página. Luego, asigne el valor al elemento del chart . Hago esto dentro del ciclo de vida AfterViewInit (también probé DoCheck ), pero no puedo resolver un problema: porque el elemento #chart se representa al mismo tiempo que el resto, cuando obtengo la altura #chartTable dentro del método setChartHeight() , solo obtiene un parte de la altura total necesaria para representar las 5 filas, por lo que el gráfico tendrá una altura mayor que la necesaria.

Para ser más especifico:

• chartTable tiene una altura normal de 100px;
• debido a que setChartHeight() se llama demasiado pronto, se encuentra que chartTable tiene solo 20px (creo que solo puede representar la primera fila)
• entonces, del total de 500 px (ejemplo) disminuirá solo 20 px, en lugar de 100 px y la altura del chart será de 480 px (en lugar de 400 px)

¿Cómo puedo esperar para renderizar todos los elementos fuera del gráfico, y justo al final, para calcular la altura del mismo en el modo correcto?

 ngAfterViewInit(): void { this.setChartHeight(); } setChartHeight(): void { let container = document.getElementById('container'); if (typeof container == 'undefined' || container == null) { return; } let table = document.getElementById('table'); let chartTable = document.getElementById('chartTable'); let footer = document.getElementById('footer'); const height = container.clientHeight - table.clientHeight - chartTable.clientHeight - footer.clientHeight; let chart = document.getElementById('chart'); chart.style.height = height + 'px'; }

Otro problema que creo que existe es que chart y chartTable tienen la misma fuente de datos. Entonces, cuando llegue la fuente, debido a que el elemento del chart está arriba del elemento chartTable , se representará primero. Por lo tanto, necesito representar el gráfico only when I'm sure that chartTable` ya se muestra en la página.

editar: ejemplo de codesandbox

Gracias