# Chart.js — Simple Yet Flexible HTML5 Canvas Charts

> Chart.js is the most popular charting library for the web — simple HTML5 canvas charts with 8 built-in chart types, responsive, animated, and mixable. The go-to choice when you need beautiful charts with minimal setup.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm i chart.js
```

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

```ts
import Chart from "chart.js/auto";

new Chart(document.getElementById("myChart") as HTMLCanvasElement, {
  type: "bar",
  data: {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
    datasets: [{
      label: "Visits",
      data: [120, 190, 300, 250, 420],
      backgroundColor: "rgba(54, 162, 235, 0.5)",
    }],
  },
  options: { responsive: true },
});
```

## Intro

Chart.js is the most popular charting library for the web with over 67K GitHub stars. It renders 8 built-in chart types using the HTML5 `<canvas>` element — simple, responsive, and highly customizable. Trusted by millions of projects including Shopify, Apache, and countless dashboards.

- **Repo**: https://github.com/chartjs/Chart.js
- **Stars**: 67K+
- **License**: MIT

## What Chart.js Does

- **8 chart types** — line, bar, radar, doughnut/pie, polar area, bubble, scatter, area
- **Mixed charts** — combine types (e.g. line + bar)
- **Responsive** — auto-resize to container
- **Animations** — configurable transitions
- **Interactivity** — hover, click, tooltip
- **Plugins** — annotations, data labels, zoom, drag-data, Chart.js-geo
- **Tree-shakeable** — import only what you use

## Architecture

Renders to a Canvas 2D context (not SVG). Chart instance holds config, data, options. Plugin hooks fire at each lifecycle stage (before/afterRender, tooltip, etc.). Datasets can be updated in place with `chart.update()`.

## Self-Hosting

Client library, no backend.

## Key Features

- 8 built-in chart types
- Canvas-based (performant for large datasets)
- Tree-shakeable imports
- Rich plugin ecosystem
- Responsive by default
- Smooth animations
- Customizable tooltips
- First-party React wrapper (`react-chartjs-2`)

## Comparison

| Library | Renderer | Chart Types | Bundle | Customization |
|---|---|---|---|---|
| Chart.js | Canvas | 8 | ~60KB | Medium |
| ECharts | Canvas/SVG | 20+ | ~350KB | High |
| Recharts | SVG (React) | 10+ | ~90KB | Medium |
| D3 | SVG/Canvas | Any | Modular | Unlimited |
| Visx | SVG (React+D3) | Any | Modular | Unlimited |

## FAQ

**Q: Canvas or SVG — which should I choose?**
A: Canvas is more performant (1000+ data points stay smooth); SVG makes it easier to manipulate individual elements. Chart.js went with Canvas for large datasets.

**Q: How do I do real-time updates?**
A: Modify `chart.data.datasets[0].data`, then call `chart.update("none")` to skip the animation.

**Q: How do I integrate with React?**
A: Use the `react-chartjs-2` wrapper, which provides React components like `<Line>` and `<Bar>`.

## Sources & Credits

- Docs: https://www.chartjs.org/docs
- GitHub: https://github.com/chartjs/Chart.js
- License: MIT

---
Source: https://tokrepo.com/en/workflows/chart-js-simple-yet-flexible-html5-canvas-charts-4fa5bf54
Author: AI Open Source