ng2-google-charts
Google Charts module for Angular 2
Please see this page for a live demo.
Install
npm i --save ng2-google-charts
Usage
Add the following inside the <head>
element in your index.html
:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
Import the Ng2GoogleChartsModule
in your app.module.ts
:
import { Ng2GoogleChartsModule } from 'ng2-google-charts';
@NgModule({
...
imports: [
...
Ng2GoogleChartsModule,
],
})
export class AppModule { }
In your templates, use the google-chart
component like this:
<google-chart [data]="pieChartOptions"></google-chart>
and in the corresponding .ts
file:
pieChartOptions = {
chartType: 'PieChart',
dataTable: [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
],
options: {'title': 'Tasks'},
};
Please see this page for a demo with more examples.
License
MIT