Chart.js — Simple Yet Flexible HTML5 Canvas Charts

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

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