Retro Chic Histogram - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Retro Chic Histogram</title> <style> body { font-family: 'Courier New', monospace; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: #ffeb3b; color: #000; } .histogram-container { width: 80%; max-width: 1200px; padding: 20px; background: #8bc34a; border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); text-align: center; } .histogram-title { font-size: 2rem; margin-bottom: 20px; position: relative; display: inline-block; color: #ff5722; } .histogram-title:after { content: "📊"; font-size: 2.5rem; position: absolute; top: -10px; right: -60px; animation: swing 1.5s infinite; } @keyframes swing { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(10deg); } } .histogram { display: flex; justify-content: space-around; align-items: flex-end; height: 300px; margin-top: 20px; } .bar { width: 50px; background: #ff5722; border-radius: 5px; transition: height 0.5s ease-in-out; position: relative; cursor: pointer; box-shadow: 0 0 10px #ff5722; } .bar:hover { background: #ff9800; } .bar-label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #ff5722; color: #fff; padding: 5px 10px; border-radius: 5px; white-space: nowrap; opacity: 0; transition: opacity 0.3s; } .bar:hover .bar-label { opacity: 1; } .bar .icon { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font-size: 1.5rem; display: none; } .bar:hover .icon { display: block; } .axis-label { margin-top: 20px; font-size: 1.2rem; color: #ff5722; } </style> </head> <body> <div class="histogram-container"> <div class="histogram-title">Growth Data 2024</div> <div class="histogram" id="histogram"> <!-- Bars will be injected here by JavaScript --> </div> <div class="axis-label">Months</div> </div> <script> const data = [ { label: 'Jan', value: 50, icon: '' }, { label: 'Feb', value: 70, icon: '' }, { label: 'Mar', value: 90, icon: '' }, { label: 'Apr', value: 30, icon: '' }, { label: 'May', value: 80, icon: '' }, { label: 'Jun', value: 60, icon: '' }, { label: 'Jul', value: 100, icon: '' }, { label: 'Aug', value: 40, icon: '' }, { label: 'Sep', value: 70, icon: '' }, { label: 'Oct', value: 60, icon: '' }, { label: 'Nov', value: 50, icon: '' }, { label: 'Dec', value: 90, icon: '' } ]; const histogram = document.getElementById('histogram'); data.forEach(item => { const bar = document.createElement('div'); bar.className = 'bar'; bar.style.height = `${item.value * 3}px`; const barLabel = document.createElement('div'); barLabel.className = 'bar-label'; barLabel.textContent = `${item.label}: ${item.value}`; const icon = document.createElement('div'); icon.className = 'icon'; icon.textContent = item.icon; bar.appendChild(barLabel); bar.appendChild(icon); histogram.appendChild(bar); }); </script> </body> </html>