This library provides a wrapper of the Google Charts library for Angular 6+. It is built with the AngularCLI and includes some examples.
To use Angular-Google-Charts in your project, install the package with npm by calling
npm install angular-google-charts
This will add the package to your package.json and install the required dependencies.
Import the GoogleChartsModule
in your app.module.ts
:
import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
...
imports: [
...
GoogleChartsModule.forRoot(),
...
],
...
})
export class AppModule {}
If you want to use GeoCharts, you may want to provide a Maps API Key. More information on this can be found in the official documentation.
To do so, just add your Maps API Key in the GoogleChartsModule.forRoot()
method like this:
import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
...
imports: [
...
GoogleChartsModule.forRoot('my-custom-maps-api-key'),
...
],
...
})
export class AppModule {}
Note:
It is not necessary to import the GoogleChartsModule
by calling its forRoot
method. You can simply import the module as well.
To create a chart, you have to possible components to use, the RawChartComponent
and the GoogleChartComponent
.
<raw-chart></raw-chart>
This component is really not more than a wrapper around the basic Google-Charts ChartWrapper
. It provides a bit of extra functionality, such as automatically
resizing when the width of the parent changes.
google.visualization.ChartSpecs
<raw-chart chartData="myChartData"></raw-chart>
The chart data is an object that allows you to pass all chart configuration options at once. Please refer to the Google documentation for more information. Everything you can pass to the ChartWrapper can be passed here as well.
Array<{formatter: google.visualization.DefaultFormatter, colIndex: number}> | google.visualization.DefaultFormatter
<google-chart [formatter]="myFormatter"></google-chart>
The formatter
property is optional and allows to format the chart data. You can pass in either a formatter class instance or an array of objects containing a formatter and an index.
If passing a formatter class instance, every column will be formatted according to it. When passing in an array, you can specify which columns to format.
// Formats the column with the index 1 and 3 to Date(long)
myFormatter = [
{ formatter: new google.visualization.Dateformat({formatType: 'long'}), colIndex: 1 },
{ formatter: new google.visualization.Dateformat({formatType: 'long'}), colIndex: 3 }
];
For more information and all formatter types, please refer to the documentation.
Note: When you get the error "google is not defined" whilst using the formatter in your component, you probably didn't load the script. Please see CustomComponents.
boolean
<google-chart [dynamicResize]="dynamicResize"></google-chart>
The dynamicResize
property is optional and makes your chart listen on window.resize
events to adapt it's size.
Defaults to false
and should only be used when setting the width or height of the chart to a percentage value. Otherwise, the chart gets redrawn unnecessary and therefore slows down the site.
<google-chart></google-chart>
The component provides a few input properties for convenience. It extends the RawChartComponent under the hood, so everything
that's possible in the RawChartComponent
also works in the GoogleChartComponent
.
string
<google-chart [type]="myType"></google-chart>
The type specifies which type of chart you want to display. It requires a string. Examples include:
'BarChart'
'PieChart'
'ColumnChart'
'AreaChart'
'Bubblechart'
- etc.
For more chart types and information, please see the google chart gallery.
Array<Array<any>>
<google-chart [data]="myData"></google-chart>
The data property expects an object of type Array<Array<any>>
. The first object in the inner array should be the name of the data entry, and the following objects should be the data you want to display. The inner Array must contain the name of the entry and the data value(s). Every inner array must be of the same length.
myData = [
['London', 8136000],
['New York', 8538000],
['Paris', 2244000],
['Berlin', 3470000],
['Kairo', 19500000],
...
];
The data object can also include formatters for the given data. To use these, pass an object of type {v: any, f: string}
as the data values in the inner array. The property v
should contain the real value, and the property f
the formatted value.
myData = [
['London', {v: 8136000, f: '8,1360'}],
['New York', {v: 8538000, f: '8,530'}],
...
];
For further information, please see the official google documentation on arraytodatatable
, which is the function used internally, or read the examples included.
Array<string>
<google-chart [columnNames]="myColumnNames"></google-chart>
The columnNames
property expects an Array<string>
containing the names for each column of the chart data. The number of entries must match the length of the inner array passed in the data
property.
Some charts don't require columnNames. Whether your chart requires it can be check in the official documentation.
myColumnNames = ['City', 'Inhabitants'];
Array<{ role: string, type: string, index?: number, p?: object }>
<google-chart [roles]="myRoles"></google-chart>
The roles
property is optional and can be used for additional, row specific styling options. If provided, the length of the array must match the length of the roles provided in each of the inner arrays of the data object.
The optional index
attribute can be used to place roles relative to columns. When specified, the role will be inserted after
after the ColumnName
at the given index. If it is not specified (default), all roles will be appended at the back of the ColumnNames
.
The optional p
attribute is used e.g. when you want to use html in a tooltip.
In that case you have to set p
with {html: true}
.
myRoles = [
{ role: 'style', type: 'string', index: 2 }
];
myData = [
['Element', 10.5, '#ffaaff'] // The last entry in the array is the role
];
For further information, please see the google documentation.
For further information on the p
attribute, please see the google documentation.
string
<google-chart [title]="myTitle"></google-chart>
The title
property is optional and provided for convenice. It can also be included in the options
property.
number
<google-chart [width]="myWidth"></google-chart>
The width
property is optional and allows to set the width of the chart. The number provided will be converted to a pixel value. The default is undefined
, which makes the chart figure out its width by itself.
You can also set the width using css, which has the advantage of allowing %
values instead of only pixels. For more information on that, see dynamic resize.
number
<google-chart [height]="myHeight"></google-chart>
The height
property is optional and allows to set the height of the chart. The number provided will be converted to a pixel value. The default is undefined
, which makes the chart figure out its height by itself.
You can also set the height using css, which has the advantage of allowing %
values instead of only pixels. For more information on that, see dynamic resize.
object
<google-chart [options]="myOptions"></google-chart>
The options
property is optional and allows to customize the chart to a great extent. For more information, please see the google documentation.
myOptions = {
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
is3D: true
};
To animate your charts, simply add the property animation
to your chart's options
object.
const myOptions = {
...
animation: {
duration: 1000,
easing: 'out',
},
...
};
For more information, please read the official documentation.
The GoogleChartComponent
provides bindings for the most common Google Chart events. It also includes two interfaces for those two events:
interface ChartEvent {
column: number;
row: number;
}
interface ChartErrorEvent {
id: string;
message: string;
detailedMessage: string;
options: object;
}
The ready
event fires as soon as a chart is fully loaded and rendered. It can be bound to like this:
<google-chart (ready)="onReady()"></google-chart>
The event doesn't have any parameters.
The error
event fires when an internal error occurs. However, since the newer versions of google-charts, most errors are displayed in the chart HTML as well. It can be bound to like this:
<google-chart (error)="onError($event)"></google-chart>
The event is of type ChartErrorEvent
.
The select
event fires when an element in the chart (i. e. a bar in a bar chart or a segment in a pie chart) gets selected. It can be bound to like this:
<google-chart (select)="onSelect($event)"></google-chart>
The event is either of type ChartEvent
, where column is the selected column in the data and row is the selected row, or it's undefined
. If it's undefined
, the selection got cancelled.
The mouseenter
event fires when the mouse enters the bounding box of one of the charts elements (i. e. a bar in a bar chart or a segment in a pie chart). It can be bound to like this:
<google-chart (mouseenter)="onMouseEnter($event)"></google-chart>
The event is of type ChartEvent
, where column is the index of the hovered column and row is the index of the hovered row.
The mouseleave
event fires when the mouse leaves the bounding box of one of the charts elements (i. e. a bar in a bar chart or a segment in a pie chart). It can be bound to like this:
<google-chart (mouseleave)="onMouseLeave($event)"></google-chart>
The event is of type ChartEvent
, where column is the index of the hovered column and row is the index of the hovered row.
For advanced actions, one may need to access to the underlying ChartWrapper
creating the charts.
<google-chart #chart></google-chart>
import { ViewChild } from '@angular/core';
import { GoogleChartComponent } from 'angular-google-charts';
@Component({
...
})
export class AppComponent implements OnInit {
@ViewChild('chart')
chart: GoogleChartComponent;
ngOnInit() {
const wrapper = this.chart.wrapper;
wrapper.draw(myAdvancedData);
}
}
When doing so, you are completely free to create the chart by yourself. Please refer to the (ChartWrapper Documentation)[https://developers.google.com/chart/interactive/docs/reference#chartwrapper-class] on how to do this.
For some specific types of Google Charts, it may be required to create a custom component. To be able to do so, the ScriptLoaderService (the service that loads the GoogleCharts Library) can be injected into your component.
constructor( private loaderService: ScriptLoaderService ) {}
And in your OnInit method (or whereever you'd want to create your chart):
ngOnInit() {
this.loaderService.onReady.subscribe( () => {
this.loaderService.loadChartPackages(this.type).subscribe(() => {
// Start creating your chart now
// Example:
const formatter = new google.visualization.BarFormat();
});
});
}
To pass a Chart Type into a Google Chart Package name, you can use the GoogleChartPackagesHelper
.
const type = GoogleChartPackagesHelper.getPackageForChartName('BarChart');
This project was generated with Angular CLI version 6.0.8.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.
This project is provided under the MIT license.