# chartjs
> Create interactive data visualizations using Chart.js library. Use when Codex needs to visualize data in browser with bar charts, line charts, pie charts, scatter plots, and other chart types.
- Author: gitclaw.ai
- Repository: alvinmrrry/openclaw-backup
- Version: 20260207183129
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/alvinmrrry/openclaw-backup
- Web: https://mule.run/skillshub/@@alvinmrrry/openclaw-backup~chartjs:20260207183129
---
---
name: chartjs
description: Create interactive data visualizations using Chart.js library. Use when Codex needs to visualize data in browser with bar charts, line charts, pie charts, scatter plots, and other chart types.
---
# Chart.js Visualization Skill
Use this skill to create interactive data visualizations in the browser using the Chart.js library. This skill enables creating various chart types including bar charts, line charts, pie charts, doughnut charts, radar charts, polar area charts, bubble charts, and scatter plots.
## Getting Started
Chart.js is a JavaScript library that creates responsive, interactive charts. It works with the HTML5 canvas element and provides a range of customization options.
## Basic Chart Structure
```html
My Chart
```
## Common Chart Types
### Bar Chart
```javascript
const config = {
type: 'bar',
data: data,
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
};
```
### Line Chart
```javascript
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Chart Title'
},
},
scales: {
y: {
beginAtZero: true
}
}
}
};
```
### Pie Chart
```javascript
const config = {
type: 'pie',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart Title'
}
}
}
};
```
### Doughnut Chart
```javascript
const config = {
type: 'doughnut',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
}
}
}
};
```
### Scatter Plot
```javascript
const config = {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}],
backgroundColor: 'rgb(255, 99, 132)'
}],
},
options: {
responsive: true,
scales: {
x: {
type: 'linear',
position: 'bottom'
}
}
}
};
```
## Data Format
### For categorical charts (bar, line, radar):
```javascript
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
};
```
### For scatter plots and bubble charts:
```javascript
const data = {
datasets: [{
label: 'My First Dataset',
data: [
{x: 10, y: 20},
{x: 15, y: 10},
{x: 25, y: 30}
],
backgroundColor: 'rgb(255, 99, 132)'
}]
};
```
### For bubble charts:
```javascript
const data = {
datasets: [{
label: 'My First Dataset',
data: [
{x: 20, y: 30, r: 15},
{x: 40, y: 10, r: 10},
{x: 15, y: 5, r: 20}
],
backgroundColor: 'rgb(255, 99, 132)'
}]
};
```
## Styling Options
### Colors
- `backgroundColor`: Fill color for shapes
- `borderColor`: Border color for shapes
- `pointBackgroundColor`: Color of data points
- `pointBorderColor`: Border color of data points
### Scales Configuration
```javascript
options: {
scales: {
x: {
display: true,
title: {
display: true,
text: 'Month'
}
},
y: {
display: true,
title: {
display: true,
text: 'Value'
},
beginAtZero: true
}
}
}
```
### Plugins
- `title`: Chart title
- `legend`: Legend display
- `tooltip`: Interactive tooltips
- `datalabels`: Labels on data points
## Responsive Design
To make charts responsive:
```javascript
options: {
responsive: true,
maintainAspectRatio: false // This allows the chart to fill the container
}
```
## Saving Charts
Charts can be saved as images:
```javascript
// Get the base64 string of the chart
const url = myChart.toBase64Image();
// Or download directly
const link = document.createElement('a');
link.download = 'chart.png';
link.href = myChart.toBase64Image();
link.click();
```
## Canvas Container
Always wrap the canvas in a div with specific dimensions:
```html
```
## Common Options
### Animation
```javascript
options: {
animation: {
duration: 2000, // Duration in ms
easing: 'easeInOutQuart'
}
}
```
### Interaction
```javascript
options: {
interaction: {
intersect: false,
mode: 'index'
}
}
```
## Tips for Effective Visualization
1. Choose the right chart type for your data
2. Use contrasting colors for better visibility
3. Include titles and axis labels for clarity
4. Limit the number of data series for readability
5. Use tooltips to provide additional information
6. Consider responsive design for different screen sizes
7. Add legends when multiple data series are present