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