Chart.js is an open-source JavaScript library for creating interactive, responsive data visualizations using HTML5 canvas. This page provides an overview of Chart.js, its key features, installation methods, and basic usage patterns.
Chart.js is designed to be simple yet flexible, enabling developers to create rich data visualizations with minimal configuration while offering extensive customization options when needed.
Project Description:
Simple yet flexible JavaScript charting for designers & developers README.md5
License: MIT LICENSE.md1-9
Key Statistics:
Chart.js renders chart elements on an HTML5 canvas. This approach makes it highly performant for large datasets and complex visualizations compared to SVG-based libraries, as it avoids bloating the DOM tree docs/index.md35-41
Sources: README.md1-6 docs/index.md11-48 LICENSE.md1-9
Chart.js offers a comprehensive set of features that make it a popular choice for data visualization:
Chart.js includes several chart types out of the box, managed by specific controller classes:
| Chart Type | Controller Class | Use Case |
|---|---|---|
| Bar | BarController src/types/index.d.ts157-160 | Compare values across categories |
| Line | LineController src/types/index.d.ts241-244 | Show trends over time or continuous data |
| Pie / Doughnut | PieController / DoughnutController src/types/index.d.ts384-391 | Display data as proportions of a whole |
| Radar | RadarController src/types/index.d.ts439-442 | Display multivariate data on radial axes |
| Polar Area | PolarAreaController src/types/index.d.ts352-355 | Similar to pie charts but with varying radii |
| Bubble | BubbleController src/types/index.d.ts184-187 | Three-dimensional data (x, y, and size) |
| Scatter | ScatterController src/types/index.d.ts251-254 | Show relationships between two variables |
Sources: src/types/index.d.ts1-500 docs/index.md17-48 docs/migration/v3-migration.md60-100
Chart.js can be installed through multiple methods depending on your development workflow.
For projects using npm or other package managers:
Sources: docs/getting-started/installation.md9
For quick prototyping, Chart.js is available via CDNJS or jsDelivr:
https://cdn.jsdelivr.net/npm/chart.js docs/getting-started/index.md21https://cdnjs.cloudflare.com/libraries/Chart.js docs/getting-started/installation.md20The source code and releases are available on GitHub. Note that if you clone the repository, you must build the project to generate distribution files docs/getting-started/installation.md34-37
Sources: docs/getting-started/installation.md1-37 docs/getting-started/index.md21
Creating a chart requires an HTML canvas element and a JavaScript configuration object.
HTML:
JavaScript:
Sources: docs/getting-started/index.md16-45
To minimize bundle size, you can import and register specific components manually instead of using the auto bundle.
Sources: docs/migration/v3-migration.md23-28 docs/developers/charts.md10
Chart.js follows a modular architecture where the Chart class acts as the central controller, managing the lifecycle and orchestrating various services.
Entity Mapping: Natural Language to Code Entities
Sources: docs/developers/charts.md5-10 docs/developers/plugins.md128-142 src/types/index.d.ts10-21
When a chart is created or updated, it follows a strict pipeline of parsing, layout, and rendering.
Lifecycle Flow Diagram
Sources: docs/developers/plugins.md148-184 docs/developers/charts.md43-68
| Entity | Role | Source |
|---|---|---|
Chart | The main entry point that holds state and manages the update cycle. | src/types/index.d.ts25 |
DatasetController | Base class for chart-type specific logic (e.g., how to draw a Bar). | docs/developers/charts.md6-8 |
Scale | Handles data-to-pixel transformations and tick generation. | docs/migration/v3-migration.md79-80 |
Element | Primitive visual objects (Point, Bar, Arc) that store view properties. | src/types/index.d.ts10 |
Plugin | Objects that hook into lifecycle events (e.g., beforeUpdate, afterDraw). | docs/developers/plugins.md128-142 |
For developers looking to modify Chart.js or build plugins:
pnpm install followed by pnpm run build to generate the ./dist folder docs/developers/contributing.md29pnpm test for unit tests and linting. Image-based tests are used for pixel-perfect verification docs/developers/contributing.md33-48DatasetController and calling Chart.register() docs/developers/charts.md5-10Sources: docs/developers/contributing.md1-34 docs/developers/charts.md1-19
Refresh this wiki