chartjs-pluginslisted
Install: claude install-skill Riltonbn/chartjs-expert
# Chart.js Custom Plugins (v4.5.1)
Complete guide to creating and using custom plugins in Chart.js.
## Plugin Basics
Plugins are the most efficient way to customize or change Chart.js default behavior. Plugins provide hooks into the chart lifecycle to execute custom code.
### Plugin Types
| Type | Scope | Use Case |
|------|-------|----------|
| **Inline** | Single chart instance | One-off customizations |
| **Shared** | Multiple charts | Reusable across specific charts |
| **Global** | All charts | Site-wide defaults |
### Inline Plugins
Define directly in chart config:
```javascript
const chart = new Chart(ctx, {
type: 'bar',
data: data,
plugins: [{
id: 'myInlinePlugin',
beforeDraw: (chart, args, options) => {
// Custom drawing logic
}
}]
});
```
**Limitations**: Cannot be registered globally, not reusable.
### Shared Plugins
Define once, use in multiple charts:
```javascript
const myPlugin = {
id: 'mySharedPlugin',
beforeDraw: (chart, args, options) => {
// Custom logic
}
};
const chart1 = new Chart(ctx1, {
plugins: [myPlugin]
});
const chart2 = new Chart(ctx2, {
plugins: [myPlugin]
});
```
### Global Plugins
Register once, apply to all charts:
```javascript
const myPlugin = {
id: 'myGlobalPlugin',
beforeDraw: (chart, args, options) => {
// Custom logic
}
};
Chart.register(myPlugin);
// Now all charts use this plugin automatically
const chart = new Chart(ctx, { type: 'bar', data: data });
```
## Plugin S