chartjs-overviewlisted
Install: claude install-skill Riltonbn/chartjs-expert
# Chart.js Overview (v4.5.1)
Guidance for installing, configuring, and optimizing Chart.js v4.5.1 in web applications.
## Installation
### npm Installation
Install Chart.js via npm:
```bash
npm install chart.js
```
### CDN Installation
Include Chart.js via CDN in HTML:
```html
<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- CDNJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.5.1/chart.umd.min.js"></script>
```
## Basic Chart Creation
Create a chart with minimal configuration:
```html
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
```
Key requirements:
- A `<canvas>` element with an id
- Wrap canvas in a container `<div>` for responsive sizing
- Instantiate `new Chart(ctx, config)` with type, data, and options
## Module Bundlers (Webpack, Rollup, Vite, Parcel)
### Quick Start (All Components)
Import everything for rapid prototyping:
```javascript
import Chart from 'chart.js/auto';
new Chart(ctx, {
type: 'bar',
data: { /* ... */ }
})