Area Chart
Filled area chart
Preview
User Growth
{ window.Prism.highlightElement($refs.codeEl) }) }"
class="w-full flex items-center justify-between px-6 py-4 text-left bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer">
View Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">User Growth</h3>
<canvas id="areaChart"></canvas>
</div>
<script>
new Chart(document.getElementById('areaChart').getContext('2d'), {
type: 'line',
data: {
labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
datasets: [{ label: 'Active Users', data: [1200, 1900, 1500, 2500, 2200, 3000], borderColor: 'rgb(16, 185, 129)', backgroundColor: 'rgba(16, 185, 129, 0.2)', fill: true, tension: 0.4 }]
},
options: { responsive: true }
});
</script>