Chart.js cheat sheet

A scannable Chart.js reference: 7 short snippets across 5 topics, each linking back to the lesson it came from.

At a glance

Quick snippets

Setup and configuration

Create a chart

npm install chart.js
# optional, for a real time axis
npm install chartjs-adapter-date-fns date-fns

Full lesson: Setup and configuration →

Chart types and datasets

Scales and parsing

options: {
  parsing: false,        // data is already { x, y } - skip the conversion pass
  normalized: true,      // rows are sorted and unique
  scales: {
    x: {
      type: 'time',
      time: { unit: 'day' },
      ticks: { maxRotation: 0, autoSkipPadding: 16 }
    },
    y: { ticks: { callback: (v) => v + ' k' } }
  }
}

Full lesson: Chart types and datasets →

Installing Chart.js and tree-shaking the bundle

Setup paths

npm install chart.js
# only for a time or timeseries axis
npm install chartjs-adapter-date-fns date-fns

Setup paths

<div style="position: relative; height: 360px; width: 100%;">
  <canvas id="revenue"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script>
  const chart = new Chart(document.getElementById('revenue'), {
    type: 'bar',
    data: { labels: ['Q1', 'Q2', 'Q3', 'Q4'], datasets: [{ label: 'Revenue', data: [820, 932, 901, 1290] }] },
    options: { responsive: true, maintainAspectRatio: false }
  });
</script>

CommonJS, ESM and measuring

# Measure, do not guess. Compare the two imports on the same chart.
npx esbuild src/charts/auto-entry.js --bundle --minify --format=esm --outfile=dist/auto.js
npx esbuild src/charts/explicit-entry.js --bundle --minify --format=esm --outfile=dist/explicit.js

ls -l dist/auto.js dist/explicit.js
gzip -c dist/auto.js | wc -c
gzip -c dist/explicit.js | wc -c

# Typical result for a single bar chart:
#   auto       ~210 KB minified, ~70 KB gzipped
#   explicit   ~95 KB minified, ~32 KB gzipped

Full lesson: Installing Chart.js and tree-shaking the bundle →

Responsive canvas layout and image export

Exporting an image

// Printing: match the paper size instead of scaling a small canvas.
window.addEventListener('beforeprint', () => {
  chart.options.devicePixelRatio = 3;
  chart.resize(1000, 520);
  chart.update('none');                 // no animation while printing
});

window.addEventListener('afterprint', () => {
  chart.options.devicePixelRatio = window.devicePixelRatio;
  chart.resize();
  chart.update('none');
});

Full lesson: Responsive canvas layout and image export →

Testing charts and migrating to v4

Migrating from v3 to v4

# 1. Upgrade and let the type checker find the API changes.
npm install chart.js@^4
npm install --save-dev typescript
npx tsc --noEmit

# 2. Look for the calls that changed shape rather than the ones that vanished.
grep -rn "custom:" src/ | grep -i tooltip
grep -rn "drawBorder\|borderColor" src/ | grep -v node_modules

# 3. Adapters must also be current: a v1 adapter with v4 core fails at runtime.
npm install chartjs-adapter-date-fns@^3 date-fns@^3

Full lesson: Testing charts and migrating to v4 →

FAQ

Related cheat sheets

HTML CSS JavaScript TypeScript HTML DOM AJAX

Last refreshed 2026-09-27.