angular-chart.js: Chart.js 2.x Directives for AngularJS 1.8

The AngularJS 1.8 problem angular-chart.js solves

AngularJS 1.x has no charting layer of its own. Chart.js draws on a canvas and knows nothing about scopes, digests or watchers, so wiring the two together means writing code that reads scope values, compares them on every digest, and calls the right Chart.js method when something moved. angular-chart.js exists to own that glue. It registers a module named chart.js and exposes directives such as chart-line, chart-bar, chart-pie and chart-doughnut, so a chart becomes an element in a template rather than a controller function.

The audience is narrow and specific: teams maintaining an AngularJS 1.8 application that already depends on Chart.js 2.x and cannot justify a framework migration. The 2.x branch requires Chart.js 2.x and AngularJS 1.8.x, uses ES6 syntax, and drops support for IE11 and below. That last point matters more than it looks. If your application still has to run in Internet Explorer, this branch is not the one you want, and the README says so plainly.

How the directives turn scope data into a canvas

Each directive is an element-level wrapper around a canvas. The README lists the attributes it reads: chart-data for series data, chart-labels for axis or series labels, chart-options for Chart.js options, chart-series for series labels, chart-colors for data colours, chart-get-color as a fallback colour function, chart-click and chart-hover for pointer handlers, chart-dataset-override for per-dataset configuration, chart-plugins for an array of Chart.js plugins, chart-display-when-no-data to create the chart even when data is empty, and chart-force-update to update even when data references have not changed.

There is also chart-base, which takes a chart-type attribute so the type can be chosen dynamically, and chart-dataset-override is what the README points to for mixed-type charts such as bar plus line. The reactive part is the design decision worth noticing: the library watches data, series, labels, colors and options and will update, or destroy and recreate, the chart on changes. The README notes that updates to chart-options are now performed non-destructively using chart.update(), which gives smoother transitions when configuration changes at runtime. Everything else can still trigger a full destroy and recreate, which is why the documentation warns that the chart-create event can fire multiple times for one chart during the AngularJS watch lifecycle.

Events run in both directions. The library listens for $destroy and calls .destroy() on the chart, and listens for $resize and calls .resize(). It emits chart-create, chart-update and chart-destroy on the scope, passing the chart as the argument, so a handler can inspect the underlying Chart.js instance.

Installing angular-chart.js and drawing a first line chart

The README gives npm as the primary path. The package ships dist/angular-chart.js as its main entry and dist/angular-chart.mjs as its module entry, with an exports map that resolves import, require and default to those files.

npm install --save angular-chart.js

For a modern bundler such as Vite, Webpack 5 or Rollup, the README shows importing the AngularJS runtime, Chart.js and the wrapper, then registering the module name that the wrapper returns. Note that the factory returns a module name, not a module instance, which is one of the 2.x breaking changes.

import angular from 'angular';
import Chart from 'chart.js';
import angularChart from 'angular-chart.js';

angular.module('app', [angularChart]);

If you are not using a bundler, the README says to copy files from dist/ and load AngularJS and Chart.js first, then the wrapper, as script tags. The chart itself is markup: a canvas element carrying the chart-line class and the directive attributes. The README's example binds chart-data, chart-labels, chart-series and chart-click.

<canvas class="chart chart-line" chart-data="data" chart-labels="labels"
	chart-series="series" chart-click="onClick"></canvas>

In the controller you set $scope.labels, $scope.series and $scope.data, and the README's example uses $timeout to replace $scope.data after 3000 milliseconds to simulate an asynchronous update. That is the behaviour to watch for on first run: the chart should redraw when the timeout fires, without you calling any Chart.js method yourself. Optional global configuration goes through ChartJsProvider in a config block, where setOptions can take an object for all charts or a chart type string for one type, for example ChartJsProvider.setOptions('line', { showLines: false }).

The 2.x breaking changes that break existing templates

Upgrading from 1.x is not a version bump. The README enumerates the changes: all options now need the chart- prefix, chart-colours became chart-colors and chart-get-colour became chart-get-color, chart types are camelCase such as line and polarArea, the chart-legend attribute was removed because legend is now a Chart.js option, and events emitted on creation and update are prefixed with chart-, for example chart-create. The library no longer calls $scope.$apply on mouse hover function calls, so any handler that relied on that to refresh the scope needs its own digest.

One change is easy to miss and hard to debug. Disabling the responsive option no longer works through the global Chart.defaults.global.responsive; it must be set through standard options such as ChartJsProvider.setOptions({ responsive: false }). A team that copies an old configuration file will find that their responsive setting silently does nothing.

The migration also inherits every Chart.js breaking change in how options are set, because the wrapper passes options through to Chart.js. The README does not document a rollback path or an automated codemod for these renames, so the upgrade is manual template and configuration editing.

Where angular-chart.js is the wrong tool

The clearest boundary is the framework. This is an AngularJS 1.x wrapper. If you are starting a project today, or if you have already moved to Angular (2 and later), React or Vue, the directives do not apply, and the README's own framing is AngularJS with Chart.js 2.x. The package.json engines field declares node >=24, which is about building and testing this repository, not about what your application runtime must be, but it does tell you the maintainers are working against a current Node toolchain while the library targets a legacy browser framework.

A second boundary is the Chart.js version. The 2.x branch requires Chart.js 2.x. If your application has already moved to Chart.js 3 or 4, this wrapper is not a drop-in, because it depends on the 2.x option model and plugin API. There is no statement in the README that a later Chart.js line is supported.

A third limit is the reactivity model itself. Because the library watches data, series, labels, colors and options, and because some changes cause a destroy and recreate rather than an in-place update, large or frequently changing datasets can produce visible rebuilds. The README's note that chart-create can be emitted multiple times per chart confirms that recreation is a normal path, not an edge case. If you need frame-level control over every redraw, calling Chart.js directly from a directive of your own gives you that control and this wrapper deliberately does not.

Chart.js on its own, and what the wrapper adds

The real alternative is using Chart.js directly. Chart.js is the rendering engine either way; angular-chart.js is a binding layer on top of it. With Chart.js alone you create a context from a canvas, instantiate a chart, keep the instance in your controller, and call update() or destroy() yourself when data changes. You get the full Chart.js API surface with no attribute translation, no prefix rules and no version coupling to a wrapper release.

The difference in approach is who owns the lifecycle. angular-chart.js owns it: it watches scope expressions, decides between update and destroy-and-recreate, and emits chart-create, chart-update and chart-destroy so you can observe what it did. Chart.js alone leaves all of that to you, which is more code but also means no surprise recreation and no rename migration when the wrapper changes its attribute conventions.

There is a middle option inside this project: the chart-dataset-override attribute lets you override individual datasets for per-dataset configuration such as a y-axis or a mixed type chart, and the README links a bar-line example. That covers many of the cases where people would otherwise drop to raw Chart.js. If your need is a genuinely custom interaction model rather than a mixed chart, the wrapper is not trying to serve you.

Maintenance, licence and what a 2.x upgrade costs

The repository is not archived, and the last push was on 2026-05-11. The most recent release is v2.1.2, published on 2026-04-30, following v2.1.1 and v2.1.0 on 2026-04-29. Those dates put the project within the last six months of activity, so it is not dormant, but it is also a wrapper around a framework line that is itself legacy.

Licensing needs care. package.json declares "license": "BSD-2-Clause", while the repository metadata reports NOASSERTION, which typically means an automated classifier could not confirm the match. A LICENSE file exists at the top level. If your organisation requires a confirmed licence identifier, that discrepancy is the thing to resolve before adoption; this is a factual mismatch, not legal advice, and it is worth a look from whoever handles licence review.

Upgrade cost splits in two. Within 2.x, patch and minor releases should be low risk, but the 1.x to 2.x move is a template-wide rename exercise: the chart- prefix on options, the colors and get-color spellings, camelCase chart types, the removal of chart-legend, and the responsive setting moving from Chart.defaults.global.responsive to ChartJsProvider.setOptions. Budget for grep across every template rather than for a dependency bump.

Editorial conclusion

Adopt angular-chart.js if you are already on AngularJS 1.8 and Chart.js 2.x and want chart markup that reacts to scope changes without hand-written watchers. Do not adopt it for a new application, for Angular (2+), or if you need Chart.js 3 or 4, since the 2.x branch pins Chart.js 2.x and the package declares node >=24 for its own build. Before committing, verify that your Chart.js version is 2.x, that your options use the chart- prefix introduced in 2.0, and that the BSD-2-Clause licence in package.json matches what your legal review expects, because the repository metadata reports NOASSERTION.

Frequently asked questions

Official sources

1. Issues
2. jtblin/angular-chart.js on GitHub
3. README
4. Releases