chartjs-configurationlisted
Install: claude install-skill Riltonbn/chartjs-expert
# Chart.js Configuration (v4.5.1)
Comprehensive guide to configuring Chart.js options, animations, legends, tooltips, and interactions.
## Configuration Structure
```javascript
const config = {
type: 'line',
data: { /* datasets, labels */ },
options: {
responsive: true,
maintainAspectRatio: true,
aspectRatio: 2,
events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
onClick: (event, elements, chart) => { /* handle click */ },
onHover: (event, elements, chart) => { /* handle hover */ },
plugins: {
legend: { /* legend options */ },
tooltip: { /* tooltip options */ },
title: { /* title options */ }
},
scales: { /* axis options */ },
animation: { /* animation options */ },
interaction: { /* interaction options */ },
layout: { /* layout options */ }
},
plugins: [] // Inline plugins
};
```
## Responsive Configuration
Namespace: `options`
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `responsive` | `boolean` | `true` | Resize with container |
| `maintainAspectRatio` | `boolean` | `true` | Keep aspect ratio |
| `aspectRatio` | `number` | `2` (radial: `1`) | Width/height ratio |
| `resizeDelay` | `number` | `0` | Debounce resize (ms) |
| `onResize` | `function` | `null` | Callback on resize |
### Container Requirements
Chart.js requires the container to be **relatively positioned** and **dedicated to the chart canvas only**:
```html
<div class="