chartjs-advancedlisted
Install: claude install-skill Riltonbn/chartjs-expert
# Chart.js Advanced Techniques (v4.5.1)
Guide to advanced Chart.js customization including gradients, custom chart types, and programmatic control.
## Gradients
Create visual depth with linear and radial gradients.
### Linear Gradients
```javascript
const ctx = document.getElementById('myChart').getContext('2d');
// Create gradient
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(75, 192, 192, 1)');
gradient.addColorStop(0.5, 'rgba(75, 192, 192, 0.5)');
gradient.addColorStop(1, 'rgba(75, 192, 192, 0.1)');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2],
backgroundColor: gradient,
borderColor: 'rgb(75, 192, 192)',
fill: true
}]
}
});
```
### Dynamic Gradients (Responsive)
```javascript
function createGradient(ctx, chartArea) {
const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
gradient.addColorStop(0, 'rgba(54, 162, 235, 0)');
gradient.addColorStop(1, 'rgba(54, 162, 235, 1)');
return gradient;
}
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'Revenue',
data: [10, 20, 30],
backgroundColor: function(context) {
const chart = context.chart;
const {ctx, chartArea} = chart;
if (!chartArea) {
return null; // Chart not initialized