This skill should be used when the user asks "Chart.js cheat sheet", "Chart.js quick reference", "Chart.js snippets", "common Chart.js patterns", "Chart.js copy paste", "Chart.js quick tips", "Chart.js one-liners", "quick Chart.js examples", "Chart.js recipes", or needs copy-paste ready code snippets for common Chart.js v4.5.1 patterns without deep documentation.
/plugin marketplace add sjnims/chartjs-expert/plugin install sjnims-chartjs-expert@sjnims/chartjs-expertThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Copy-paste snippets for common Chart.js patterns.
ticks: {
callback: (value) => '$' + value.toLocaleString()
}
ticks: {
callback: (value) => value + '%'
}
ticks: {
callback: (value) => {
if (value >= 1000000) return (value / 1000000).toFixed(1) + 'M';
if (value >= 1000) return (value / 1000).toFixed(1) + 'K';
return value;
}
}
// Requires: import 'chartjs-adapter-date-fns'; (or luxon, moment)
scales: {
x: {
type: 'time',
time: {
unit: 'day',
displayFormats: { day: 'MMM d' }
}
}
}
plugins: { legend: { display: false } }
plugins: { tooltip: { enabled: false } }
plugins: { title: { display: false } }
scales: { y: { beginAtZero: true } }
scales: { y: { min: 0, max: 100 } }
type: 'bar',
options: { indexAxis: 'y' }
animation: false
scales: {
x: { stacked: true },
y: { stacked: true }
}
const colors = [
'rgb(255, 99, 132)', // red
'rgb(54, 162, 235)', // blue
'rgb(255, 206, 86)', // yellow
'rgb(75, 192, 192)', // teal
'rgb(153, 102, 255)', // purple
'rgb(255, 159, 64)' // orange
];
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgb(54, 162, 235)'
scales: {
x: { grid: { display: false } },
y: { grid: { display: false } }
}
Chart.defaults.font.family = "'Inter', sans-serif";
Chart.defaults.font.size = 14;
options: {
responsive: true,
maintainAspectRatio: false
}
<div style="height: 400px;">
<canvas id="myChart"></canvas>
</div>
options: {
responsive: true,
aspectRatio: 2 // width:height = 2:1
}
options: { aspectRatio: 1 }
chart.data.datasets[0].data = [1, 2, 3, 4, 5];
chart.update();
chart.update('none');
chart.data.labels.push('New Label');
chart.data.datasets[0].data.push(42);
chart.update();
chart.data.labels.pop();
chart.data.datasets[0].data.pop();
chart.update();
chart.destroy();
options: {
onClick: (event, elements) => {
if (elements.length > 0) {
const index = elements[0].index;
console.log('Clicked:', chart.data.labels[index]);
}
}
}
const imageUrl = chart.toBase64Image();
import { Chart, BarController, BarElement, CategoryScale, LinearScale } from 'chart.js';
Chart.register(BarController, BarElement, CategoryScale, LinearScale);
import { Chart, LineController, LineElement, PointElement, CategoryScale, LinearScale } from 'chart.js';
Chart.register(LineController, LineElement, PointElement, CategoryScale, LinearScale);
import { Chart, PieController, ArcElement, Legend, Tooltip } from 'chart.js';
Chart.register(PieController, ArcElement, Legend, Tooltip);
// Use DoughnutController for doughnut charts
import { Legend, Tooltip } from 'chart.js';
Chart.register(Legend, Tooltip);
new Chart(ctx, {
type: 'bar',
data: {
labels: ['A', 'B', 'C'],
datasets: [{ data: [10, 20, 30] }]
}
});
new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{ data: [10, 20, 15] }]
}
});
new Chart(ctx, {
type: 'pie',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{ data: [30, 50, 20] }]
}
});
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.