chartjs-quickreflisted
Install: claude install-skill Riltonbn/chartjs-expert
# Chart.js Quick Reference (v4.5.1)
Copy-paste snippets for common Chart.js patterns.
## Data Formatting
### Currency Labels
```javascript
ticks: {
callback: (value) => '$' + value.toLocaleString()
}
```
### Percentage Labels
```javascript
ticks: {
callback: (value) => value + '%'
}
```
### Abbreviated Numbers (1K, 1M)
```javascript
ticks: {
callback: (value) => {
if (value >= 1000000) return (value / 1000000).toFixed(1) + 'M';
if (value >= 1000) return (value / 1000).toFixed(1) + 'K';
return value;
}
}
```
### Date/Time Labels
```javascript
// Requires: import 'chartjs-adapter-date-fns'; (or luxon, moment)
scales: {
x: {
type: 'time',
time: {
unit: 'day',
displayFormats: { day: 'MMM d' }
}
}
}
```
## Common Configurations
### Hide Legend
```javascript
plugins: { legend: { display: false } }
```
### Hide Tooltip
```javascript
plugins: { tooltip: { enabled: false } }
```
### Hide Title
```javascript
plugins: { title: { display: false } }
```
### Start Y-axis at Zero
```javascript
scales: { y: { beginAtZero: true } }
```
### Set Axis Range
```javascript
scales: { y: { min: 0, max: 100 } }
```
### Horizontal Bar Chart
```javascript
type: 'bar',
options: { indexAxis: 'y' }
```
### Disable Animation
```javascript
animation: false
```
### Stacked Bar/Line Chart
```javascript
scales: {
x: { stacked: true },
y: { stacked: true }
}
```
## Styling
### Chart.js Default Palette
```javascript
const colors =