# 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 in your project root:

## 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 vs SVG 选哪个？**
A: Canvas 性能更好（1000+ 数据点流畅），SVG 更容易单独操作每个元素。Chart.js 选 Canvas 是为了大数据集。

**Q: 怎么做实时更新？**
A: 修改 `chart.data.datasets[0].data` 后调用 `chart.update("none")` 跳过动画。

**Q: 和 React 集成？**
A: 用 `react-chartjs-2` 包装器，提供 `<Line>` `<Bar>` 等 React 组件。

## 来源与致谢 Sources

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

---
Source: https://tokrepo.com/en/workflows/4fa5bf54-3580-11f1-9bc6-00163e2b0d79
Author: AI Open Source