--- name: chartjs version: 1.0.0 description: Create simple, responsive charts quickly with Chart.js author: workspace-hub category: data-visualization tags: [charts, chartjs, simple, quick, responsive, canvas] platforms: [web, javascript] --- # Chart.js Quick Charting Skill Create beautiful, responsive charts in minutes with Chart.js - the simple yet flexible JavaScript charting library. ## When to Use This Skill Use Chart.js when you need: - **Quick implementation** - Up and running in minutes - **Simple charts** - Line, bar, pie, doughnut, radar charts - **Minimal configuration** - Sensible defaults that work out of the box - **Small projects** - Lightweight library (60KB gzipped) - **Responsive charts** - Mobile-friendly by default - **No dependencies** - Standalone library **Avoid when:** - Complex customization needed (use D3.js) - 3D charts required (use Plotly) - Advanced scientific visualizations needed (use Plotly) - Large datasets >10k points (use Plotly with WebGL) ## Core Capabilities ### 1. Basic Line Chart ```html

``` ### 2. Bar Chart ```javascript const ctx = document.getElementById('barChart').getContext('2d'); const barChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: 'Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)', 'rgba(153, 102, 255, 0.6)', 'rgba(255, 159, 64, 0.6)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { responsive: true, scales: { y: { beginAtZero: true } } } }); ``` ### 3. Pie/Doughnut Chart ```javascript const ctx = document.getElementById('pieChart').getContext('2d'); const pieChart = new Chart(ctx, { type: 'pie', // or 'doughnut' data: { labels: ['Desktop', 'Mobile', 'Tablet'], datasets: [{ label: 'Device Usage', data: [55, 35, 10], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] }, options: { responsive: true, plugins: { legend: { position: 'top', }, title: { display: true, text: 'Device Usage Statistics' } } } }); ``` ## Complete Examples ### Example 1: Multi-Dataset Line Chart ```html

``` ### Example 2: Stacked Bar Chart ```javascript const ctx = document.getElementById('stackedBar').getContext('2d'); const stackedChart = new Chart(ctx, { type: 'bar', data: { labels: ['Q1', 'Q2', 'Q3', 'Q4'], datasets: [ { label: 'Revenue', data: [100, 120, 115, 134], backgroundColor: 'rgba(75, 192, 192, 0.7)', }, { label: 'Costs', data: [60, 70, 65, 80], backgroundColor: 'rgba(255, 99, 132, 0.7)', }, { label: 'Profit', data: [40, 50, 50, 54], backgroundColor: 'rgba(54, 162, 235, 0.7)', } ] }, options: { responsive: true, scales: { x: { stacked: true, }, y: { stacked: true, beginAtZero: true } }, plugins: { title: { display: true, text: 'Quarterly Financial Overview' } } } }); ``` ### Example 3: Radar Chart ```javascript const ctx = document.getElementById('radarChart').getContext('2d'); const radarChart = new Chart(ctx, { type: 'radar', data: { labels: ['Speed', 'Reliability', 'Comfort', 'Safety', 'Efficiency'], datasets: [ { label: 'Vehicle A', data: [85, 90, 70, 95, 80], backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgb(255, 99, 132)', pointBackgroundColor: 'rgb(255, 99, 132)', }, { label: 'Vehicle B', data: [75, 85, 90, 85, 90], backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor: 'rgb(54, 162, 235)', pointBackgroundColor: 'rgb(54, 162, 235)', } ] }, options: { responsive: true, scales: { r: { beginAtZero: true, max: 100 } }, plugins: { title: { display: true, text: 'Vehicle Comparison' } } } }); ``` ### Example 4: Loading Data from CSV ```javascript // Using Fetch API to load CSV fetch('../data/sales.csv') .then(response => response.text()) .then(csvText => { const lines = csvText.split('\n'); const headers = lines[0].split(','); const labels = []; const data = []; for (let i = 1; i < lines.length; i++) { const values = lines[i].split(','); labels.push(values[0]); data.push(parseFloat(values[1])); } const ctx = document.getElementById('csvChart').getContext('2d'); new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: 'Sales Data', data: data, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] }, options: { responsive: true } }); }); ``` ### Example 5: Real-Time Updating Chart ```javascript const ctx = document.getElementById('realtimeChart').getContext('2d'); const chart = new Chart(ctx, { type: 'line', data: { labels: [], datasets: [{ label: 'Real-time Data', data: [], borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] }, options: { responsive: true, scales: { x: { display: true }, y: { beginAtZero: true } }, animation: { duration: 0 // Disable animation for real-time } } }); // Update every second let dataPoint = 0; setInterval(() => { const now = new Date(); const timeLabel = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds(); chart.data.labels.push(timeLabel); chart.data.datasets[0].data.push(Math.random() * 100); // Keep only last 20 points if (chart.data.labels.length > 20) { chart.data.labels.shift(); chart.data.datasets[0].data.shift(); } chart.update(); }, 1000); ``` ### Example 6: Mixed Chart Types ```javascript const ctx = document.getElementById('mixedChart').getContext('2d'); const mixedChart = new Chart(ctx, { data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [ { type: 'bar', label: 'Sales', data: [50, 60, 70, 80, 90], backgroundColor: 'rgba(54, 162, 235, 0.7)', }, { type: 'line', label: 'Target', data: [55, 65, 75, 85, 95], borderColor: 'rgb(255, 99, 132)', fill: false } ] }, options: { responsive: true, plugins: { title: { display: true, text: 'Sales vs Target' } } } }); ``` ## Best Practices ### 1. Use Responsive Containers ```html

``` ```javascript options: { responsive: true, maintainAspectRatio: false } ``` ### 2. Destroy Charts Before Recreating ```javascript let myChart; function createChart(data) { // Destroy existing chart if (myChart) { myChart.destroy(); } const ctx = document.getElementById('myChart').getContext('2d'); myChart = new Chart(ctx, { type: 'line', data: data }); } ``` ### 3. Use Plugins for Extended Functionality ```javascript // Example: Chart.js Data Labels Plugin import ChartDataLabels from 'chartjs-plugin-datalabels'; const chart = new Chart(ctx, { plugins: [ChartDataLabels], data: {...}, options: { plugins: { datalabels: { color: '#fff', display: true } } } }); ``` ### 4. Optimize for Performance ```javascript options: { // Disable animations for large datasets animation: { duration: 0 }, // Use decimation for large datasets parsing: false, normalized: true } ``` ## Available Chart Types 1. **Line** - Trend analysis, time series 2. **Bar** - Comparisons, categorical data 3. **Pie** - Proportions, percentages 4. **Doughnut** - Like pie, with center hole 5. **Radar** - Multivariate data 6. **Polar Area** - Similar to pie with variable radii 7. **Bubble** - 3-dimensional data (x, y, size) 8. **Scatter** - Correlation analysis ## Common Customizations ### Custom Colors ```javascript const colors = [ 'rgba(255, 99, 132, 0.7)', 'rgba(54, 162, 235, 0.7)', 'rgba(255, 206, 86, 0.7)', 'rgba(75, 192, 192, 0.7)', 'rgba(153, 102, 255, 0.7)' ]; ``` ### Custom Tooltips ```javascript options: { plugins: { tooltip: { callbacks: { label: function(context) { let label = context.dataset.label || ''; if (label) { label += ': '; } label += '$' + context.parsed.y.toFixed(2); return label; } } } } } ``` ### Custom Legends ```javascript options: { plugins: { legend: { position: 'bottom', labels: { font: { size: 14 }, usePointStyle: true } } } } ``` ## Installation ### CDN (Quick Start) ```html ``` ### NPM ```bash npm install chart.js ``` ```javascript import Chart from 'chart.js/auto'; ``` ### ES Modules ```html ``` ## Popular Plugins ### Chart.js Zoom Plugin ```bash npm install chartjs-plugin-zoom ``` ```javascript import zoomPlugin from 'chartjs-plugin-zoom'; Chart.register(zoomPlugin); options: { plugins: { zoom: { zoom: { wheel: { enabled: true }, pinch: { enabled: true }, mode: 'xy' } } } } ``` ### Chart.js Annotation Plugin ```bash npm install chartjs-plugin-annotation ``` ### Chart.js Data Labels ```bash npm install chartjs-plugin-datalabels ``` ## Integration Examples ### With React ```javascript import { useEffect, useRef } from 'react'; import Chart from 'chart.js/auto'; function ChartComponent({ data }) { const chartRef = useRef(null); const chartInstance = useRef(null); useEffect(() => { if (chartInstance.current) { chartInstance.current.destroy(); } const ctx = chartRef.current.getContext('2d'); chartInstance.current = new Chart(ctx, { type: 'line', data: data, options: { responsive: true } }); return () => { if (chartInstance.current) { chartInstance.current.destroy(); } }; }, [data]); return