What is chartjs-quickref?

This Claude skill serves as a comprehensive Chart.js v4.5.1 quick reference and cheat sheet, providing instant, copy-paste ready code snippets for common data visualization patterns. It is designed to help developers quickly implement complex charting features—such as custom data formatting, responsive configurations, and dynamic updates—without needing to navigate through extensive documentation.

When should I use chartjs-quickref?

chartjs-quickref is useful in the following scenarios: • Quickly formatting chart axis labels to display currency, percentages, or abbreviated numbers (e.g., 1K, 1M) for better readability. • Implementing responsive chart layouts that automatically fill containers or maintain specific aspect ratios across different devices. • Configuring common chart types like Bar, Line, and Pie charts with minimal boilerplate and optimized tree-shaking imports. • Handling dynamic data operations, including adding or removing data points and updating chart instances without full page refreshes. • Customizing chart aesthetics through specific color palettes, font settings, and grid line visibility to match brand guidelines.

name	chartjs-quickref
description	This skill should be used when the user asks "Chart.js cheat sheet", "Chart.js quick reference", "Chart.js snippets", "common Chart.js patterns", "Chart.js copy paste", "Chart.js quick tips", "Chart.js one-liners", "quick Chart.js examples", "Chart.js recipes", or needs copy-paste ready code snippets for common Chart.js v4.5.1 patterns without deep documentation.

Chart.js Quick Reference (v4.5.1)

Copy-paste snippets for common Chart.js patterns.

Data Formatting

Currency Labels

ticks: {
  callback: (value) => '$' + value.toLocaleString()
}

Percentage Labels

ticks: {
  callback: (value) => value + '%'
}

Abbreviated Numbers (1K, 1M)

ticks: {
  callback: (value) => {
    if (value >= 1000000) return (value / 1000000).toFixed(1) + 'M';
    if (value >= 1000) return (value / 1000).toFixed(1) + 'K';
    return value;
  }
}

Date/Time Labels

// Requires: import 'chartjs-adapter-date-fns'; (or luxon, moment)
scales: {
  x: {
    type: 'time',
    time: {
      unit: 'day',
      displayFormats: { day: 'MMM d' }
    }
  }
}

Common Configurations

Hide Legend

plugins: { legend: { display: false } }

plugins: { tooltip: { enabled: false } }

Hide Title

plugins: { title: { display: false } }

Start Y-axis at Zero

scales: { y: { beginAtZero: true } }

Set Axis Range

scales: { y: { min: 0, max: 100 } }

Horizontal Bar Chart

type: 'bar',
options: { indexAxis: 'y' }

Disable Animation

animation: false

Stacked Bar/Line Chart

scales: {
  x: { stacked: true },
  y: { stacked: true }
}

Styling

Chart.js Default Palette

const colors = [
  'rgb(255, 99, 132)',   // red
  'rgb(54, 162, 235)',   // blue
  'rgb(255, 206, 86)',   // yellow
  'rgb(75, 192, 192)',   // teal
  'rgb(153, 102, 255)',  // purple
  'rgb(255, 159, 64)'    // orange
];

Semi-Transparent Backgrounds

backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgb(54, 162, 235)'

Hide Grid Lines

scales: {
  x: { grid: { display: false } },
  y: { grid: { display: false } }
}

Custom Font

Chart.defaults.font.family = "'Inter', sans-serif";
Chart.defaults.font.size = 14;

Responsiveness

Fill Container

options: {
  responsive: true,
  maintainAspectRatio: false
}

<div style="height: 400px;">
  <canvas id="myChart"></canvas>
</div>

Fixed Aspect Ratio

options: {
  responsive: true,
  aspectRatio: 2  // width:height = 2:1
}

Square Chart

options: { aspectRatio: 1 }

Dynamic Updates

Update Data

chart.data.datasets[0].data = [1, 2, 3, 4, 5];
chart.update();

Update Without Animation

chart.update('none');

Add Data Point

chart.data.labels.push('New Label');
chart.data.datasets[0].data.push(42);
chart.update();

Remove Data Point

chart.data.labels.pop();
chart.data.datasets[0].data.pop();
chart.update();

Destroy Chart

chart.destroy();

Event Handling

Click Handler

options: {
  onClick: (event, elements) => {
    if (elements.length > 0) {
      const index = elements[0].index;
      console.log('Clicked:', chart.data.labels[index]);
    }
  }
}

Export as Image

const imageUrl = chart.toBase64Image();

Tree-Shaking Imports

Bar Chart

import { Chart, BarController, BarElement, CategoryScale, LinearScale } from 'chart.js';
Chart.register(BarController, BarElement, CategoryScale, LinearScale);

Line Chart

import { Chart, LineController, LineElement, PointElement, CategoryScale, LinearScale } from 'chart.js';
Chart.register(LineController, LineElement, PointElement, CategoryScale, LinearScale);

Pie/Doughnut Chart

import { Chart, PieController, ArcElement, Legend, Tooltip } from 'chart.js';
Chart.register(PieController, ArcElement, Legend, Tooltip);
// Use DoughnutController for doughnut charts

import { Legend, Tooltip } from 'chart.js';
Chart.register(Legend, Tooltip);

Quick Start Templates

Minimal Bar Chart

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{ data: [10, 20, 30] }]
  }
});

Minimal Line Chart

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{ data: [10, 20, 15] }]
  }
});

Minimal Pie Chart

new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{ data: [30, 50, 20] }]
  }
});

When & Why to Use This Skill

Use Cases