Notifications

3 new

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

Emma Wilson commented on Homepage Redesign

45 minutes ago

James Miller mentioned you in Sprint Planning

2 hours ago

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Charts

Chart.js examples with different chart types.

Line Chart

<canvas id="lineChart" x-data="chart({ type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Users', data: [1200, 1900, 1600, 2400, 1800, 2800], borderColor: chartColors.blue, backgroundColor: chartColors.blueLight, borderWidth: 2, tension: 0.4, fill: true, pointBackgroundColor: chartColors.blue, pointBorderColor: '#fff', pointBorderWidth: 2, pointRadius: 4, pointHoverRadius: 6 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } } }, scales: { y: { beginAtZero: true, grid: { color: chartColors.grid }, ticks: { callback: function(v) { return v.toLocaleString(); } } }, x: { grid: { color: chartColors.grid } } } } })"></canvas>

Bar Chart

<canvas id="barChart" x-data="chart({ type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Revenue', data: [14500, 18200, 15800, 21000, 19300, 24500], backgroundColor: chartColors.blue, hoverBackgroundColor: chartColors.blueLight, borderRadius: 6, borderSkipped: false }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } } }, scales: { y: { beginAtZero: true, grid: { color: chartColors.grid }, ticks: { callback: function(v) { return '$' + v.toLocaleString(); } } }, x: { grid: { color: chartColors.grid } } } } })"></canvas>

Doughnut Chart

<canvas id="doughnutChart" x-data="chart({ type: 'doughnut', data: { labels: ['Direct', 'Referral', 'Organic', 'Social'], datasets: [{ data: [35, 25, 20, 20], backgroundColor: [chartColors.blue, chartColors.green, chartColors.orange, chartColors.purple], borderColor: '#fff', borderWidth: 2, hoverBorderWidth: 3 }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '65%', plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } } } } })"></canvas>

Area Chart

<canvas id="areaChart" x-data="chart({ type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Revenue', data: [14000, 17000, 15500, 20000, 18500, 24000], borderColor: chartColors.blue, backgroundColor: chartColors.blueLight, borderWidth: 2, tension: 0.4, fill: true, pointBackgroundColor: chartColors.blue, pointBorderColor: '#fff', pointBorderWidth: 2, pointRadius: 3, pointHoverRadius: 5 }, { label: 'Expenses', data: [8000, 9500, 8800, 11000, 10200, 13000], borderColor: chartColors.orange, backgroundColor: chartColors.orangeLight, borderWidth: 2, tension: 0.4, fill: true, pointBackgroundColor: chartColors.orange, pointBorderColor: '#fff', pointBorderWidth: 2, pointRadius: 3, pointHoverRadius: 5 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } } }, scales: { y: { beginAtZero: false, grid: { color: chartColors.grid }, ticks: { callback: function(v) { return '$' + v.toLocaleString(); } } }, x: { grid: { color: chartColors.grid } } } } })"></canvas>