Chart.js
A small open source JavaScript charting library covering the common chart types with little configuration.
Chart.js is an open source charting library for the browser. It draws to canvas and provides the chart types most projects need, created by passing a type, the data and a set of options. It is deliberately compact, and additional behaviour is added through plugins rather than being built into the core.
What Chart.js sets out to do
Chart.js is an open source charting library with a clear scope: cover the charts most projects actually need, in as little code as possible, without becoming large.
That scope is a design decision rather than a limitation discovered later. The core provides the familiar chart types and leaves everything else to plugins.
The three part configuration
Every chart is created the same way, which is much of why it is quick to learn.
The type. Which chart to draw. Bar, line, pie, doughnut, radar, polar area, scatter or bubble.
The data. The labels and the datasets. Each dataset holds its values and its own appearance settings.
The options. How the chart behaves and looks: scales, legend, tooltips, responsiveness, animation.
Once that shape is understood, moving between chart types is mostly a matter of changing the type and adjusting the data, since the structure does not change.
Drawing to canvas
Chart.js renders to a canvas element rather than producing an element per mark.
The practical effect is that a chart with a great many points does not fill the document with thousands of nodes, so the page stays light.
The trade is that individual marks are not addressable in the document. They cannot be styled with a stylesheet or selected the way vector elements can. For most application charts that is irrelevant, and for a chart that must integrate tightly with a design system it is worth knowing.
Plugins
Keeping the core small means some common requests are not in it. Labels drawn directly on the marks, annotations, zooming.
These come from plugins. A plugin is included alongside the library and hooks into the chart's lifecycle to add its behaviour.
This arrangement keeps a project's charting code to what it actually uses, rather than shipping a large library where most capabilities go untouched.
Responsiveness
Charts resize with their container by default rather than being drawn at a fixed size.
That behaviour is what makes the library comfortable in modern layouts, where the width a chart occupies is not known in advance and changes with the viewport.
Who uses Chart.js
Chart.js is used by web developers adding charts to pages and applications, particularly where the requirement is a handful of standard charts rather than a visualisation platform. It is also a common choice for internal tools, where a small dependency and quick setup matter more than breadth.
Points to consider
The chart catalogue is deliberately limited. A requirement for maps, hierarchies or relationship diagrams is outside its scope, and a broader library is the right answer for those.
Canvas rendering also means charts do not scale to arbitrary sizes as cleanly as vector output, which matters if a chart is intended for printing.
Getting started
The documentation includes a getting started page that creates a first chart against a canvas element, followed by a section per chart type and a reference for the options. Copying the first example and replacing its data is enough to have something working.
Key features of Chart.js
Capabilities described in the official documentation.
A small set of core chart types
Bar, line, pie, doughnut, radar, polar area, scatter and bubble charts are provided by the library itself.
Three part configuration
A chart is created from a type, a data object and an options object, which keeps the setup short.
Canvas rendering
Charts are drawn to a canvas element, which keeps the page light even when a chart holds many points.
Plugins
Behaviour beyond the core, such as data labels or annotations, is added by including a plugin.
Advantages of Chart.js
Factual advantages that follow from the features above.
Quick to a working chart
Because the configuration is short and defaults are sensible, a first chart takes very little code.
A small addition to a page
The library is compact and unused chart types can be left out, so it adds little weight to a page.
Charts adapt to the container
Responsive behaviour means a chart resizes with its container rather than needing a size fixed in advance.
Free for commercial use
The library is open source under a permissive licence, so including it in a product raises no purchase question.
Common use cases for Chart.js
Situations the official documentation describes this tool as being used for.
Charts on a marketing or content page
A simple chart illustrates figures on a page without adding a large charting dependency to the site.
A summary view in an application
A dashboard panel shows a handful of common charts drawn from data the application already holds.
Adding a chart to an existing page
The library is included and a chart is created against a canvas element without restructuring the page.
Labelling values directly on a chart
A plugin adds value labels to the marks so a reader sees figures without hovering over them.
Official website
Everything on this page is based on the official documentation for Chart.js. You can read the source here.
Chart.js official documentation