- name
- chartjs
- description
- Chart.js charting skill. Used to generate visual charts such as line charts, bar charts, pie charts, radar charts, scatter plots, etc.
Chart.js
Chart.js is a popular open-source charting library supporting 8 chart types, rendered via Canvas with responsive design.
Trigger Scenarios
- User requests to create/generate/draw a chart
- User mentions Chart.js or data visualization
- User requests to visualize data with a chart
- User uploads data and requests visualization
Installation
npm:
npm install chart.jsCDN (Script Tag):
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>Webpack/Rollup (recommended for tree-shaking):
import Chart from 'chart.js/auto'; // Full features, no manual registration neededChart Types and Required Components
Each chart type has minimal dependencies; importing on demand optimizes bundle size:
| Chart Type | Controller | Element | Default Scale |
|---|---|---|---|
| Bar | BarController | BarElement | CategoryScale(x) + LinearScale(y) |
| Line | LineController | LineElement + PointElement | CategoryScale(x) + LinearScale(y) |
| Pie | PieController | ArcElement | — |
| Doughnut | DoughnutController | ArcElement | — |
| PolarArea | PolarAreaController | ArcElement | RadialLinearScale |
| Radar | RadarController | LineElement + PointElement | RadialLinearScale |
| Scatter | ScatterController | PointElement | LinearScale(x/y) |
| Bubble | BubbleController | PointElement | LinearScale(x/y) |
Basic Usage
HTML:
<div style="max-width: 600px">
<canvas id="myChart"></canvas>
</div>JavaScript:
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar', // Chart type
data: {
labels: ['January', 'February', 'March'],
datasets: [{
label: 'Sales (10k)',
data: [12, 19, 3],
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: { beginAtZero: true }
}
}
});Common Configurations
Responsive (auto-adapts to container width)
options: {
responsive: true,
maintainAspectRatio: false
}Fill Line Chart (Area)
datasets: [{
fill: true, // or 'origin'/'start'/'end'
tension: 0.4 // Curve smoothness 0-1
}]Multiple Datasets
datasets: [
{ label: '2023', data: [1, 2, 3], borderColor: 'red' },
{ label: '2024', data: [3, 2, 1], borderColor: 'blue' }
]Quick Color Settings
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)',
]Interaction Events
Click to get data point values (requires helpers import):
import Chart from 'chart.js/auto';
import { getRelativePosition } from 'chart.js/helpers';
options: {
onClick: (e) => {
const pos = getRelativePosition(e, chart);
const x = chart.scales.x.getValueForPixel(pos.x);
const y = chart.scales.y.getValueForPixel(pos.y);
console.log(x, y);
}
}Time Scale
Requires a date adapter (e.g., chartjs-adapter-moment):
import moment from 'moment';
import 'chartjs-adapter-moment';
// Then configure scales with type: 'time'Output Methods
After generation, there are two output paths:
- Render directly in an HTML page — Generate a complete HTML file containing canvas + Chart.js CDN, open with a browser
- Screenshot/PDF — Take a screenshot using the browser tool, or generate an image file using puppeteer/canvas
Tip: Generating HTML is the simplest and most reliable output method; let Chart.js handle responsive layout itself.
More References
For detailed API and examples, see references/api.md.