Charts & Analytics

Data visualization with Chart.js - line, bar, pie, donut charts

Back to Site

Line Chart

Interactive line chart with multiple datasets using Chart.js

Revenue Overview

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">Revenue Overview</h3>
    <canvas id="lineChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById(&#39;lineChart&#39;).getContext(&#39;2d&#39;);
new Chart(ctx, {
    type: &#39;line&#39;,
    data: {
        labels: [&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;],
        datasets: [{
            label: &#39;Revenue&#39;,
            data: [12000, 19000, 15000, 25000, 22000, 30000],
            borderColor: &#39;rgb(59, 130, 246)&#39;,
            backgroundColor: &#39;rgba(59, 130, 246, 0.1)&#39;,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: true }
        }
    }
});
</script>

Bar Chart

Vertical bar chart for comparing data across categories

Monthly Sales

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">Monthly Sales</h3>
    <canvas id="barChart"></canvas>
</div>

<script>
const ctx = document.getElementById(&#39;barChart&#39;).getContext(&#39;2d&#39;);
new Chart(ctx, {
    type: &#39;bar&#39;,
    data: {
        labels: [&#39;Product A&#39;, &#39;Product B&#39;, &#39;Product C&#39;, &#39;Product D&#39;],
        datasets: [{
            label: &#39;Sales&#39;,
            data: [65, 59, 80, 81],
            backgroundColor: [
                &#39;rgba(59, 130, 246, 0.8)&#39;,
                &#39;rgba(16, 185, 129, 0.8)&#39;,
                &#39;rgba(245, 158, 11, 0.8)&#39;,
                &#39;rgba(239, 68, 68, 0.8)&#39;
            ]
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: false }
        }
    }
});
</script>

Pie Chart

Circular chart showing proportional data

Market Share

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">Market Share</h3>
    <canvas id="pieChart"></canvas>
</div>

<script>
const ctx = document.getElementById(&#39;pieChart&#39;).getContext(&#39;2d&#39;);
new Chart(ctx, {
    type: &#39;pie&#39;,
    data: {
        labels: [&#39;Chrome&#39;, &#39;Firefox&#39;, &#39;Safari&#39;, &#39;Edge&#39;, &#39;Others&#39;],
        datasets: [{
            data: [65, 15, 10, 5, 5],
            backgroundColor: [
                &#39;rgba(59, 130, 246, 0.8)&#39;,
                &#39;rgba(245, 158, 11, 0.8)&#39;,
                &#39;rgba(16, 185, 129, 0.8)&#39;,
                &#39;rgba(139, 92, 246, 0.8)&#39;,
                &#39;rgba(156, 163, 175, 0.8)&#39;
            ]
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { position: &#39;bottom&#39; }
        }
    }
});
</script>

Donut Chart

Pie chart with a hollow center

Traffic Sources

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">Traffic Sources</h3>
    <canvas id="donutChart"></canvas>
</div>

<script>
const ctx = document.getElementById(&#39;donutChart&#39;).getContext(&#39;2d&#39;);
new Chart(ctx, {
    type: &#39;doughnut&#39;,
    data: {
        labels: [&#39;Direct&#39;, &#39;Organic&#39;, &#39;Referral&#39;, &#39;Social&#39;],
        datasets: [{
            data: [45, 30, 15, 10],
            backgroundColor: [
                &#39;rgba(59, 130, 246, 0.8)&#39;,
                &#39;rgba(16, 185, 129, 0.8)&#39;,
                &#39;rgba(245, 158, 11, 0.8)&#39;,
                &#39;rgba(139, 92, 246, 0.8)&#39;
            ]
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { position: &#39;right&#39; }
        }
    }
});
</script>

Area Chart

Filled line chart showing trends over time

User Growth

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>
const ctx = document.getElementById(&#39;areaChart&#39;).getContext(&#39;2d&#39;);
new Chart(ctx, {
    type: &#39;line&#39;,
    data: {
        labels: [&#39;Week 1&#39;, &#39;Week 2&#39;, &#39;Week 3&#39;, &#39;Week 4&#39;, &#39;Week 5&#39;, &#39;Week 6&#39;],
        datasets: [{
            label: &#39;Active Users&#39;,
            data: [1200, 1900, 1500, 2500, 2200, 3000],
            borderColor: &#39;rgb(16, 185, 129)&#39;,
            backgroundColor: &#39;rgba(16, 185, 129, 0.2)&#39;,
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: true }
        }
    }
});
</script>

Multi-line Chart

Comparing multiple datasets on one chart

Sales Comparison

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">Sales Comparison</h3>
    <canvas id="multiLineChart"></canvas>
</div>

<script>
const ctx = document.getElementById(&#39;multiLineChart&#39;).getContext(&#39;2d&#39;);
new Chart(ctx, {
    type: &#39;line&#39;,
    data: {
        labels: [&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;],
        datasets: [
            {
                label: &#39;2024&#39;,
                data: [12, 19, 15, 25, 22, 30],
                borderColor: &#39;rgb(59, 130, 246)&#39;,
                backgroundColor: &#39;rgba(59, 130, 246, 0.1)&#39;,
                tension: 0.4
            },
            {
                label: &#39;2025&#39;,
                data: [15, 23, 18, 28, 25, 35],
                borderColor: &#39;rgb(16, 185, 129)&#39;,
                backgroundColor: &#39;rgba(16, 185, 129, 0.1)&#39;,
                tension: 0.4
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: true }
        }
    }
});
</script>

Horizontal Bar Chart

Bar chart with horizontal orientation

Top Products

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">Top Products</h3>
    <canvas id="horizontalBarChart"></canvas>
</div>

<script>
const ctx = document.getElementById(&#39;horizontalBarChart&#39;).getContext(&#39;2d&#39;);
new Chart(ctx, {
    type: &#39;bar&#39;,
    data: {
        labels: [&#39;Laptop&#39;, &#39;Smartphone&#39;, &#39;Tablet&#39;, &#39;Headphones&#39;, &#39;Smartwatch&#39;],
        datasets: [{
            label: &#39;Units Sold&#39;,
            data: [450, 380, 290, 510, 340],
            backgroundColor: &#39;rgba(59, 130, 246, 0.8)&#39;
        }]
    },
    options: {
        indexAxis: &#39;y&#39;,
        responsive: true,
        plugins: {
            legend: { display: false }
        }
    }
});
</script>

Radar Chart

Spider/web chart for multivariate data

Skill Assessment

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">Skill Assessment</h3>
    <canvas id="radarChart"></canvas>
</div>

<script>
const ctx = document.getElementById(&#39;radarChart&#39;).getContext(&#39;2d&#39;);
new Chart(ctx, {
    type: &#39;radar&#39;,
    data: {
        labels: [&#39;HTML&#39;, &#39;CSS&#39;, &#39;JavaScript&#39;, &#39;PHP&#39;, &#39;Laravel&#39;, &#39;Vue.js&#39;],
        datasets: [{
            label: &#39;Skills&#39;,
            data: [90, 85, 80, 75, 70, 65],
            borderColor: &#39;rgb(59, 130, 246)&#39;,
            backgroundColor: &#39;rgba(59, 130, 246, 0.2)&#39;
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: true }
        }
    }
});
</script>

Sparklines

Small inline charts for showing trends

Revenue

$45,231

Orders

1,293

Customers

573

Code 
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="text-center">
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Revenue</p>
            <canvas id="sparkline1" height="40"></canvas>
            <p class="text-2xl font-bold text-gray-900 dark:text-white mt-2">$45,231</p>
        </div>
        <div class="text-center">
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Orders</p>
            <canvas id="sparkline2" height="40"></canvas>
            <p class="text-2xl font-bold text-gray-900 dark:text-white mt-2">1,293</p>
        </div>
        <div class="text-center">
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Customers</p>
            <canvas id="sparkline3" height="40"></canvas>
            <p class="text-2xl font-bold text-gray-900 dark:text-white mt-2">573</p>
        </div>
    </div>
</div>

<script>
// Revenue sparkline
new Chart(document.getElementById(&#39;sparkline1&#39;).getContext(&#39;2d&#39;), {
    type: &#39;line&#39;,
    data: {
        labels: Array(12).fill(&#39;&#39;),
        datasets: [{
            data: [20, 25, 22, 30, 28, 35, 32, 40, 38, 45, 42, 48],
            borderColor: &#39;rgb(16, 185, 129)&#39;,
            borderWidth: 2,
            fill: false,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
    }
});
</script>