Chart.js

Chart.js is a free, open-source JavaScript library for building responsive, animated charts on the HTML5 canvas element. It ships with eight built-in chart types — line, bar, radar, doughnut/pie, polar area, bubble, and scatter, plus mixed-type charts — along with a plugin architecture that lets you register custom controllers, elements, and scales.

With over 67,000 GitHub stars and roughly 13 million weekly npm downloads, Chart.js is one of the most widely used charting libraries in the JavaScript ecosystem. It works with vanilla JavaScript or any frontend framework via community wrapper packages (react-chartjs-2, vue-chartjs, ng2-charts), and ships type definitions for full TypeScript support out of the box.

What You Get

• Eight core chart types (line, bar, radar, doughnut/pie, polar area, bubble, scatter) plus mixed-type charts in a single canvas
• A tree-shakeable module system — import only the controllers, elements, and plugins you use, or pull in chart.js/auto for the full bundle
• Built-in animation engine, responsive resizing, and accessible tooltip/legend/title plugins with no extra dependencies
• First-class TypeScript type definitions and a public plugin API for extending charts with custom behavior

Common Use Cases

• Rendering dashboards and admin panels for analytics products
• Visualizing time-series and financial data with the time/timeseries scale
• Embedding lightweight charts in marketing sites or reports where a heavier SVG library is unnecessary
• Building custom chart types on top of Chart.js’s controller/element primitives

Under The Hood

Architecture Chart.js is built around a central Chart class (src/core/core.controller.js) that owns the render/update lifecycle and delegates type-specific behavior to a set of registered primitives. A Registry singleton (src/core/core.registry.js) maintains TypedRegistry instances for dataset controllers (src/controllers/), scales (src/scales/), elements (src/elements/), and plugins (src/plugins/), so chart types like line, bar, or radar are just controller/element pairs registered at runtime rather than hard-coded into the core. The library exposes both a manual entry point (src/index.ts, which requires calling Chart.register(…)) and an auto entry point (auto/auto.js) that eagerly registers every built-in controller, element, scale, and plugin, trading bundle size for zero-config convenience. Rendering itself goes straight to a canvas 2D context rather than SVG/DOM, coordinated by a dedicated animator (src/core/core.animator.js) that batches per-property animations across all active chart instances via requestAnimationFrame.

Tech Stack The library is written in a mix of vanilla JavaScript and TypeScript (about 89%/11% by bytes per GitHub’s language breakdown) and ships as ESM (dist/chart.js) and CJS (dist/chart.cjs) bundles built with Rollup, plus a UMD build for script-tag usage. Its only runtime dependency is @kurkle/color for color parsing and manipulation. Development tooling includes TypeScript for the ambient .d.ts declarations, ESLint with a project-specific eslint-config-chartjs, and a pnpm workspace (the chart.js core plus a separate docs package) managed under pnpm-workspace.yaml.

Code Quality Testing is extensive: the test/specs directory alone contains hundreds of spec files (586 test-related JS files across the whole test tree) covering every controller, scale, element, and plugin, run through Karma and Jasmine across multiple browsers (Chrome, Firefox, Edge, Safari) via karma.conf.cjs, with a separate test/integration suite that verifies the package works correctly when consumed from Node, TypeScript-Node, and a React browser app. Code style is enforced via ESLint (including a markdown linter for docs) and a lint-types step that runs tsc against the generated declaration files. Naming and structure are consistent across chart types (controller.<type>.js with matching test files), which keeps the large codebase navigable despite its size.

API Design The public API centers on a single new Chart(ctx, config) constructor that takes a canvas or context plus a declarative {type, data, options} config object, with no imperative chart-building calls required for common cases. The chart.js/auto subpath removes the need to call Chart.register() manually for teams that don’t care about bundle size, while the base chart.js entry point supports fully tree-shaken, register-what-you-use imports for teams that do. First-class TypeScript definitions (dist/types.d.ts) give autocomplete on config, scale, and plugin options, and the plugin API’s lifecycle hooks (beforeInit, afterUpdate, etc.) follow a consistent, well-documented naming convention that keeps custom plugin authoring approachable.