ng2-google-charts
Google Charts module for Angular 2
Please see this page for a live demo.
Install
npm i --save ng2-google-chartsUsage
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.