// Add the "show" class to trigger the animation and calculate the current height var element = document.querySelector('.animate-height'); element.classList.add('show'); // Calculate the current height of the element var computedHeight = window.getComputedStyle(element).height; console.log(computedHeight); .tool-tip { visibility: hidden; } .chart-container-1:hover { fill:#EFF3FA; } .chart-container:hover { fill:#EFF3FA; } .line-group {} .drinking-water-total-1:hover~.chart-container-1{ fill:#EFF3FA; } .drinking-water-total-1:hover~.d-t-1 { visibility: visible; } .drinking-water-total-2:hover~.d-t-2 { visibility: visible; } .drinking-water-total-3:hover~.d-t-3 { visibility: visible; } .drinking-water-total-4:hover~.d-t-4 { visibility: visible; } .drinking-water-total-5:hover~.d-t-5 { visibility: visible; } .drinking-water-rural-1:hover ~ .d-r-1 { visibility: visible; } .drinking-water-rural-2:hover ~ .d-r-2 { visibility: visible; } .drinking-water-rural-3:hover ~ .d-r-3 { visibility: visible; } .drinking-water-rural-4:hover ~ .d-r-4 { visibility: visible; } .drinking-water-rural-5:hover ~ .d-r-5 { visibility: visible; } .sanitation-total-1:hover ~ .s-t-1 { visibility: visible; } .sanitation-total-2:hover ~ .s-t-2 { visibility: visible; } .sanitation-total-3:hover ~ .s-t-3 { visibility: visible; } .sanitation-total-4:hover ~ .s-t-4 { visibility: visible; } .sanitation-total-5:hover ~ .s-t-5 { visibility: visible; } .sanitation-rural-1:hover ~ .s-r-1 { visibility: visible; } .sanitation-rural-2:hover ~ .s-r-2 { visibility: visible; } .sanitation-rural-3:hover ~ .s-r-3 { visibility: visible; } .sanitation-rural-4:hover ~ .s-r-4 { visibility: visible; } .sanitation-rural-5:hover ~ .s-r-5 { visibility: visible; } .hygene-total-1:hover ~ .h-t-1 { visibility: visible; } .hygene-total-2:hover ~ .h-t-2 { visibility: visible; } .hygene-total-3:hover ~ .h-t-3 { visibility: visible; } .hygene-rural-1:hover ~ .h-r-1 { visibility: visible; } .hygene-rural-2:hover ~ .h-r-2 { visibility: visible; } .hygene-rural-3:hover ~ .h-r-3 { visibility: visible; } .d-w-c-1:hover ~ .d-t-1 { visibility: visible; } .d-w-c-1:hover ~ .d-r-1 { visibility: visible; } .d-w-c-2:hover ~ .d-t-2 { visibility: visible; } .d-w-c-2:hover ~ .d-r-2 { visibility: visible; } .d-w-c-3:hover ~ .d-t-3 { visibility: visible; } .d-w-c-3:hover ~ .d-r-3 { visibility: visible; } .d-w-c-4:hover ~ .d-t-4 { visibility: visible; } .d-w-c-4:hover ~ .d-r-4 { visibility: visible; } .d-w-c-5:hover ~ .d-t-5 { visibility: visible; } .d-w-c-5:hover ~ .d-r-5 { visibility: visible; } .st-c-1:hover ~ .s-t-1 { visibility: visible; } .st-c-1:hover ~ .s-r-1 { visibility: visible; } .st-c-2:hover ~ .s-t-2 { visibility: visible; } .st-c-2:hover ~ .s-r-2 { visibility: visible; } .st-c-3:hover ~ .s-t-3 { visibility: visible; } .st-c-3:hover ~ .s-r-3 { visibility: visible; } .st-c-4:hover ~ .s-t-4 { visibility: visible; } .st-c-4:hover ~ .s-r-4 { visibility: visible; } .st-c-5:hover ~ .s-t-5 { visibility: visible; } .st-c-5:hover ~ .s-r-5 { visibility: visible; } .st-c-1:hover ~ .s-t-1 { visibility: visible; } .st-c-1:hover ~ .s-r-1 { visibility: visible; } .hg-c-1:hover ~ .h-t-1 { visibility: visible; } .hg-c-1:hover ~ .h-r-1 { visibility: visible; } .hg-c-2:hover ~ .h-t-2 { visibility: visible; } .hg-c-2:hover ~ .h-r-2 { visibility: visible; } .hg-c-3:hover ~ .h-t-3 { visibility: visible; } .hg-c-3:hover ~ .h-r-3 { visibility: visible; } .hg-c-4:hover ~ .h-t-4 { visibility: visible; } .hg-c-4:hover ~ .h-r-4 { visibility: visible; } .hg-c-5:hover ~ .h-t-5 { visibility: visible; } .hg-c-5:hover ~ .h-r-5 { visibility: visible; } #Layer_3 .st0{fill:#E6E6E6;} #Layer_3 text{ font-family: 'Prompt', sans-serif !important; } #Layer_3 .st1{fill:#EFF3FA;} #Layer_3 .st2{fill:none;stroke:#CCCCCC;stroke-width:0.5;stroke-miterlimit:10;} #Layer_3 .st3{fill:#4D4D4D;} #Layer_3 .st4{font-family:'Prompt-Regular';} #Layer_3 .st5{font-size:15.4052px;} #Layer_3 .st6{fill:#666666;} #Layer_3 .st7{font-family:'Prompt-Medium';} #Layer_3 .st8{font-family:'Prompt-SemiBold';} #Layer_3 .st9{font-size:20px;} #Layer_3 .st10{font-size:18px;} #Layer_3 .st11{fill:#001F77;} #Layer_3 .st12{fill:#4A71C2;} #Layer_3 .st13{fill:#6286CC;} #Layer_3 .st14{fill:#1E2A6E;} #Layer_3 .st15{fill:#7B9AD5;} #Layer_3 .st16{fill:#AEC2E7;} <!-- --> Total 0 100 75 50 Coverage (%) 25 Drinking Water Sanitation Hygiene Rural Total Rural Total Rural Basic Limited No Service Basic Limited No Service Basic Limited No Service 15.49 37.11 40.49 22.92 20.12 1.02 2.04 96.94 79.88 53.65 23.44 20.08 39.43 12.89 50.00 8.14 76.37

// Add the "show" class to trigger the animation and calculate the current height var element = document.querySelector('.animate-height'); element.classList.add('show'); // Calculate the current height of the element var computedHeight = window.getComputedStyle(element).height; console.log(computedHeight); .tool-tip { visibility: hidden; } .chart-container:hover { fill:#EFF3FA; } .line-group {} .drinking-water-total-1:hover~.d-t-1 { visibility: visible; } .drinking-water-total-2:hover~.d-t-2 { visibility: visible; } .drinking-water-total-3:hover~.d-t-3 { visibility: visible; } .drinking-water-total-4:hover~.d-t-4 { visibility: visible; } .drinking-water-total-5:hover~.d-t-5 { visibility: visible; } .drinking-water-rural-1:hover ~ .d-r-1 { visibility: visible; } .drinking-water-rural-2:hover ~ .d-r-2 { visibility: visible; } .drinking-water-rural-3:hover ~ .d-r-3 { visibility: visible; } .drinking-water-rural-4:hover ~ .d-r-4 { visibility: visible; } .drinking-water-rural-5:hover ~ .d-r-5 { visibility: visible; } .sanitation-total-1:hover ~ .s-t-1 { visibility: visible; } .sanitation-total-2:hover ~ .s-t-2 { visibility: visible; } .sanitation-total-3:hover ~ .s-t-3 { visibility: visible; } .sanitation-total-4:hover ~ .s-t-4 { visibility: visible; } .sanitation-total-5:hover ~ .s-t-5 { visibility: visible; } .sanitation-rural-1:hover ~ .s-r-1 { visibility: visible; } .sanitation-rural-2:hover ~ .s-r-2 { visibility: visible; } .sanitation-rural-3:hover ~ .s-r-3 { visibility: visible; } .sanitation-rural-4:hover ~ .s-r-4 { visibility: visible; } .sanitation-rural-5:hover ~ .s-r-5 { visibility: visible; } .hygene-total-1:hover ~ .h-t-1 { visibility: visible; } .hygene-total-2:hover ~ .h-t-2 { visibility: visible; } .hygene-total-3:hover ~ .h-t-3 { visibility: visible; } .hygene-rural-1:hover ~ .h-r-1 { visibility: visible; } .hygene-rural-2:hover ~ .h-r-2 { visibility: visible; } .hygene-rural-3:hover ~ .h-r-3 { visibility: visible; } .d-w-c-1:hover ~ .d-t-1 { visibility: visible; } .d-w-c-1:hover ~ .d-r-1 { visibility: visible; } .d-w-c-2:hover ~ .d-t-2 { visibility: visible; } .d-w-c-2:hover ~ .d-r-2 { visibility: visible; } .d-w-c-3:hover ~ .d-t-3 { visibility: visible; } .d-w-c-3:hover ~ .d-r-3 { visibility: visible; } .d-w-c-4:hover ~ .d-t-4 { visibility: visible; } .d-w-c-4:hover ~ .d-r-4 { visibility: visible; } .d-w-c-5:hover ~ .d-t-5 { visibility: visible; } .d-w-c-5:hover ~ .d-r-5 { visibility: visible; } .st-c-1:hover ~ .s-t-1 { visibility: visible; } .st-c-1:hover ~ .s-r-1 { visibility: visible; } .st-c-2:hover ~ .s-t-2 { visibility: visible; } .st-c-2:hover ~ .s-r-2 { visibility: visible; } .st-c-3:hover ~ .s-t-3 { visibility: visible; } .st-c-3:hover ~ .s-r-3 { visibility: visible; } .st-c-4:hover ~ .s-t-4 { visibility: visible; } .st-c-4:hover ~ .s-r-4 { visibility: visible; } .st-c-5:hover ~ .s-t-5 { visibility: visible; } .st-c-5:hover ~ .s-r-5 { visibility: visible; } .st-c-1:hover ~ .s-t-1 { visibility: visible; } .st-c-1:hover ~ .s-r-1 { visibility: visible; } .hg-c-1:hover ~ .h-t-1 { visibility: visible; } .hg-c-1:hover ~ .h-r-1 { visibility: visible; } .hg-c-2:hover ~ .h-t-2 { visibility: visible; } .hg-c-2:hover ~ .h-r-2 { visibility: visible; } .hg-c-3:hover ~ .h-t-3 { visibility: visible; } .hg-c-3:hover ~ .h-r-3 { visibility: visible; } .hg-c-4:hover ~ .h-t-4 { visibility: visible; } .hg-c-4:hover ~ .h-r-4 { visibility: visible; } .hg-c-5:hover ~ .h-t-5 { visibility: visible; } .hg-c-5:hover ~ .h-r-5 { visibility: visible; } #Layer_2 .st0{fill:#E6E6E6;} #Layer_2 .st1{fill:#EFF3FA;} #Layer_2 text{ font-family: 'Prompt', sans-serif !important; } #Layer_2 .st2{fill:none;stroke:#CCCCCC;stroke-width:0.5;stroke-miterlimit:10;} #Layer_2 .st3{fill:#001F77;} #Layer_2 .st4{fill:#4A71C2;} #Layer_2 .st5{fill:#6286CC;} #Layer_2 .st6{fill:#7B9AD5;} #Layer_2 .st7{fill:#AEC2E7;} #Layer_2 .st8{fill:#4D4D4D;} #Layer_2 .st9{font-family:'Prompt-Regular';} #Layer_2 .st10{font-size:15.4052px;} #Layer_2 .st11{fill:#666666;} #Layer_2 .st12{font-family:'Prompt-Medium';} #Layer_2 .st13{font-family:'Prompt-SemiBold';} #Layer_2 .st14{font-size:20px;} #Layer_2 .st15{font-size:18px;} #Layer_2 .st16{fill:#1E2A6E;} Total 0 100 75 50 Coverage (%) 25 Drinking Water Sanitation Hygiene Rural Total Rural Total Rural Basic Limited None Insufficient Data Basic Limited None Open Defecation Basic Limited None Open Defecation 55.39 24.51 3.00 24.47 46.72 28.81 64.71 91.69 8.31 32.30 77.58 22.42 26.45 49.04 44.61