Chart.js — Simple Yet Flexible HTML5 Canvas Charts

What it is

Chart.js is an open-source JavaScript charting library that renders beautiful, responsive charts on HTML5 canvas. It ships with 8 built-in chart types (line, bar, radar, doughnut, pie, polar area, bubble, scatter) and supports mixing chart types, custom plugins, and extensive theming. Chart.js is the go-to choice when you need charts with minimal setup and no heavy dependencies.

Frontend developers, data dashboard builders, and anyone adding visualizations to web applications benefit from Chart.js. Its simplicity makes it accessible to beginners while its plugin system satisfies advanced customization needs.

How it saves time or tokens

Chart.js gets you from zero to a working chart in under 10 lines of code. No complex build configuration, no mandatory framework integration, no data transformation pipelines. For AI-generated dashboards and reports, Chart.js's simple API means coding agents produce working chart code with fewer iterations and less context.

How to use

1. Install Chart.js via npm or include from a CDN
2. Add a canvas element to your HTML
3. Create a Chart instance with your data and configuration

Example

<canvas id="myChart" width="400" height="200"></canvas>

import Chart from 'chart.js/auto';

new Chart(document.getElementById('myChart') as HTMLCanvasElement, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [{
      label: 'Token Usage',
      data: [1200, 1900, 3000, 5000, 4200],
      backgroundColor: 'rgba(54, 162, 235, 0.5)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    scales: { y: { beginAtZero: true } }
  }
});

Related on TokRepo

• AI tools for coding — Browse frontend development tools
• Featured workflows — Discover top-rated workflows

Common pitfalls

• Canvas-based rendering means charts are not accessible to screen readers by default; add ARIA labels and a data table fallback
• Rendering many data points (10,000+) on canvas degrades performance; use decimation or switch to WebGL-based libraries for large datasets
• Chart.js v4 has breaking changes from v3; check migration guides when upgrading