https://github.com/gmazzamuto/ng2-google-charts
Angular Google Charts module
https://github.com/gmazzamuto/ng2-google-charts
angular angular12 angular13 chart charts google-charts
Last synced: 20 days ago
JSON representation
Angular Google Charts module
- Host: GitHub
- URL: https://github.com/gmazzamuto/ng2-google-charts
- Owner: gmazzamuto
- License: mit
- Created: 2016-11-03T16:15:30.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-04-11T07:53:02.000Z (about 4 years ago)
- Last Synced: 2025-10-28T11:54:02.032Z (8 months ago)
- Topics: angular, angular12, angular13, chart, charts, google-charts
- Language: TypeScript
- Homepage: https://www.devrandom.it/software/ng2-google-charts/
- Size: 1.55 MB
- Stars: 120
- Watchers: 9
- Forks: 63
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# ng2-google-charts
> Angular Google Charts module
[![NPM Version][npm-image]][npm-url]
[![Downloads][npm-downloads-image]][npm-downloads-url]
## Versions
* Version 6 is built with Angular 9, should work with Angular versions from 8 to
13.
* Version 7 is built with Angular 12 in Ivy partial compilation mode, works with
Angular versions from 12 to 13.
## Features
* All chart types
* Dashboard and controls
* Chart Editor
* Formatters
* Events
## Sponsoring
*If you are using this package commercially or if you find it useful, please
consider [sponsoring][donate-url] this project.*
## Install
```bash
npm i --save ng2-google-charts
```
## Quick start
Import the module in your `app.module.ts`:
```ts
import { Ng2GoogleChartsModule } from 'ng2-google-charts';
@NgModule({
...
imports: [
...
Ng2GoogleChartsModule,
],
providers: [
})
export class AppModule { }
```
In your templates, use the `google-chart` component like this:
```html
```
and in the corresponding `.ts` file:
```ts
import { GoogleChartInterface, GoogleChartType } from 'ng2-google-charts';
public pieChart: GoogleChartInterface = {
chartType: GoogleChartType.PieChart,
dataTable: [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
],
//firstRowIsData: true,
options: {'title': 'Tasks'},
};
```
## Usage & Demo
Check out the [reference documentation][reference] and the [live demo][example-page].
## License
[MIT](LICENSE.md)
[npm-image]: https://img.shields.io/npm/v/ng2-google-charts.svg
[npm-url]: https://npmjs.org/package/ng2-google-charts
[npm-downloads-image]: https://img.shields.io/npm/dm/ng2-google-charts.svg
[npm-downloads-url]: https://npmjs.org/package/ng2-google-charts
[reference]: https://www.devrandom.it/software/ng2-google-charts/additional-documentation/usage.html
[example-page]: https://www.devrandom.it/software/ng2-google-charts/demo
[donate-url]: https://github.com/gmazzamuto/ng2-google-charts?sponsor=1