# ng2-charts supports eight chart types but its API list names six

> ng2-charts wraps Chart.js in a single Angular directive with a version compatibility table that maps every Angular major to a library major. The type property description drops two of the eight supported chart types, the documentation site is linked over plain http, and the repository root package is the demo app rather than the library.

**valor-software/ng2-charts** — Beautiful charts for Angular based on Chart.js

- Repository: https://github.com/valor-software/ng2-charts
- Website: http://valor-software.github.io/ng2-charts/
- Stars: 2,401 · Forks: 562
- Language: TypeScript
- License: MIT
- Published: 2026-09-28 · Updated: 2026-09-28 · Language: en
- Canonical page: https://hysenlabs.com/projects/valor-software-ng2-charts

## Eight chart types are supported and six are described on the type property

The overview says there is one directive for all chart types, `baseChart`, and that there are eight of them: `line`, `bar`, `radar`, `pie`, `polarArea`, `doughnut`, `bubble` and `scatter`. It is applied to a canvas element:

```html
<canvas baseChart [data]="barChartData" [options]="barChartOptions" [type]="'bar'"> </canvas>
```

The properties section then describes the `type` input and lists six values: line, bar, radar, pie, polarArea and doughnut, or any custom type added to Chart.js. `bubble` and `scatter` are absent from that list even though the same page names them as supported. The `labels` description has the same gap in a different form, splitting charts into those that need labels, which are line, bar and radar, and those where labels are only for hover, which are polarArea, pie and doughnut, with the two axis based types left unmentioned. So the directive accepts all eight, and the reference text quietly covers six.

## Two Angular majors in the table support two library majors each

The compatibility table maps every Angular major from 2 to 22 onto an ng2-charts major, and the mapping is mostly one to one. Angular 2 through 9 sits on v1.x, Angular 10, 11 and 12 on v2.x, 13 on v3.x, 16 on v5.x, 18 on v7.x, 19 on v8.x, 20 on v9.x, 21 on v10.x and 22 on v11.x. Two rows break the pattern: Angular 14 and 15 each carry a tick under both v3.x and v4.x, and Angular 17 carries one under both v5.x and v6.x. That means for those Angular versions the library major is a choice within a range rather than an answer you can look up, and it is the only place in the page where a version decision is left open. The newest entry lines up with the repository itself, since Angular 22 maps to v11.x and v11.0.0 is the most recent tag, dated 2026-09-28.

## Chart.js is a peer dependency, so the version you install does not include it

The library wraps Chart.js rather than embedding it, and the manual install path says so in a numbered step of its own. You install the library with `npm install ng2-charts --save` or `yarn add ng2-charts --save`, and then, separately, you have to install and include Chart.js because it is a peer dependency:

```bash
npm install chart.js --save
```

or the yarn equivalent. The Angular CLI route hides this, since `ng add ng2-charts` reports that the required packages are installed automatically and that `app.config.ts` is updated with the changes needed to start using the library. What a consumer ends up with therefore depends on which path they took. The demo workspace in this repository shows the widest case: alongside the library it depends on `chart.js` at ^4.0.1 and adds `chartjs-adapter-date-fns`, `chartjs-chart-financial` and `chartjs-plugin-annotation`, none of which the library itself requires. Those are demo choices, and they are the reason a bundle built from the repository is larger than one built from the library alone.

## Three ways to register Chart.js, differing in what they bundle

Registration is the one decision the page explains with a size argument rather than a feature list. The full form is a provider built from the default registerables, given in `bootstrapApplication`:

```typescript
provideCharts({ registerables: [BarController, Legend, Colors] });
```

That snippet is the minimal one, presented as the way to reduce bundle size by naming only the controllers, the legend plugin and the colours plugin. The alternative wraps the same call in `withDefaultRegisterables()`, which registers everything Chart.js ships rather than the three you choose. Both forms are shown twice, once for a standalone application bootstrapped with `bootstrapApplication` and once inside an `@NgModule` providers array, so the API is the same either way and the difference is only how the app was bootstrapped. One property default is stated outright: `legend` is a boolean that defaults to false, so the legend is off unless you turn it on.

## The repository root package is the demo app, not the library

The root `package.json` is named `ng2-charts-demo`, is marked private, and carries version `^1.0.0`, none of which describes the published package. Everything in its script block is a workspace command rather than a library command: `start` runs `nx serve`, `build` runs a development build of the demo target, `build:prod` builds it for production after `prebuild:prod` executes `copy-sources.mjs`, `build:lib` builds the library target with `nx run ng2-charts:build:production`, and `publish:lib` publishes from `dist/ng2-charts`. So the published artefact is produced by a build target and published by path, and the manifest you would read first in the repository describes none of it. The tree around it is the Nx layout: `nx.json`, `apps/`, `libs/`, `tools/`, `jest.config.ts`, `jest.preset.js`, `eslint.config.mjs`, `tsconfig.base.json`, a `.husky/` directory wired to a `prepare` script, and both `.env` and `.nvmrc` checked in.

## The Angular dependency set carries one patch version of skew

The demo's dependency list pins the Angular framework packages individually rather than as a range, and they are pinned to the same patch with one exception. `@angular/animations`, `cdk`, `common`, `compiler`, `core`, `forms`, `material`, `platform-browser`, `platform-browser-dynamic`, `platform-server` and `router` are all at 22.1.6, while `@angular/ssr` sits at 22.1.8. `@nx/angular` is at 23.2.1, a different major line from the framework it builds. Two smaller details in the same block: `chart.js` is the only dependency written with a caret range, `^4.0.1`, while everything Angular is exact, and the workspace is locked with `package-lock.json` rather than the pnpm lockfile most Angular workspaces of this shape use. None of that is documented on the page, so the install instructions and the actual dependency set have to be read from two different places.

## The documentation link uses http and the chat link is an old workspace name

The header carries three badges and each one resolves somewhere different from what you would expect. The package badge points at npmjs.org for `ng2-charts` and the version badge at badge.fury.io for the same package, which is consistent. The documentation site is linked at `http://valor-software.github.io/ng2-charts/`, plain http rather than https, while the samples link further down the page is `https://valor-software.com/ng2-charts/`, so the two entry points to the documentation use different hosts and different transports. The third badge is a Slack link to an `ngx-home` workspace on the older Slack invite host, which shares a name with a different library family rather than with this project. Two release titles add to the picture: v9.0.0 was published with the title `v9,0.0`, a comma where a period belongs, while v10.0.0 and v11.0.0 are spelled correctly.

## Conclusion

ng2-charts suits an Angular team that wants Chart.js with Angular bindings rather than a second charting library, and that is willing to pick a library major to match its Angular major. Before adopting it, read the compatibility table rather than the install command, because two Angular majors in the table support two library majors each, so the version you get is a decision rather than a lookup. Decide on the registerables you register, since the full default set and the three item minimal configuration differ only in bundle size. And remember Chart.js itself is a peer dependency you install separately, which means the library's own version number tells you nothing about the Chart.js version under it.

## FAQ

### what is ng2 charts

It is an Angular wrapper around Chart.js published as `ng2-charts` under the MIT license. It uses one directive, `baseChart`, for every chart type and lists eight of them: line, bar, radar, pie, polarArea, doughnut, bubble and scatter.

### how to install ng2 charts

Run `ng add ng2-charts`, which installs the required packages and updates `app.config.ts`, and optionally `npm install --save-dev ng2-charts-schematics` for the generation schematics. Installing by hand means `npm install ng2-charts --save` and then installing Chart.js separately, since it is a peer dependency.

### how to use ng2 charts in angular

Import `BaseChartDirective` into your standalone component, put it on a canvas with `[data]`, `[options]` and `[type]`, and register the Chart.js pieces with `provideCharts`. Use `withDefaultRegisterables()` for everything, or pass `registerables: [BarController, Legend, Colors]` to keep the bundle smaller.

### is ng2 charts free

The library is published under the MIT license, and the schematics package is installed as a separate development dependency. Chart.js itself is not bundled: it is a peer dependency that you install yourself, alongside any adapters or plugins your charts need.

## Sources

- [License: MIT](https://github.com/valor-software/ng2-charts/blob/master/LICENSE)
- [Project website](http://valor-software.github.io/ng2-charts/)
- [README](https://github.com/valor-software/ng2-charts/blob/master/README.md)
- [Releases](https://github.com/valor-software/ng2-charts/releases)
- [valor-software/ng2-charts on GitHub](https://github.com/valor-software/ng2-charts)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/valor-software-ng2-charts