{"id":13497415,"url":"https://github.com/FERNman/angular-google-charts","last_synced_at":"2025-03-28T22:31:44.198Z","repository":{"id":37405906,"uuid":"139018299","full_name":"FERNman/angular-google-charts","owner":"FERNman","description":"A wrapper for the Google Charts library written in Angular.","archived":false,"fork":false,"pushed_at":"2025-01-22T06:34:19.000Z","size":3264,"stargazers_count":278,"open_issues_count":5,"forks_count":110,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-03-20T23:46:30.369Z","etag":null,"topics":["angular","angular-google-charts","charts","google-charts"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FERNman.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-28T12:56:42.000Z","updated_at":"2025-03-12T10:54:54.000Z","dependencies_parsed_at":"2024-01-16T09:55:55.414Z","dependency_job_id":"435cd110-4cfd-479d-8b56-686d15e77940","html_url":"https://github.com/FERNman/angular-google-charts","commit_stats":{"total_commits":275,"total_committers":24,"mean_commits":"11.458333333333334","dds":"0.22909090909090912","last_synced_commit":"d803822d19c76125710f3bef6f0a1504696fd2bb"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FERNman%2Fangular-google-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FERNman%2Fangular-google-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FERNman%2Fangular-google-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FERNman%2Fangular-google-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FERNman","download_url":"https://codeload.github.com/FERNman/angular-google-charts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246110210,"owners_count":20725010,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-google-charts","charts","google-charts"],"created_at":"2024-07-31T20:00:30.608Z","updated_at":"2025-03-28T22:31:43.847Z","avatar_url":"https://github.com/FERNman.png","language":"TypeScript","readme":"# Angular-Google-Charts\n\n![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/FERNman/angular-google-charts/test-and-build.yml) ![npm](https://img.shields.io/npm/dm/angular-google-charts) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\n\u003e A wrapper for the [Google Charts library](https://developers.google.com/chart/) written in Angular.\n\n## Setup\n\n### Installation\n\nTo use Angular-Google-Charts in your project, install the package with npm by calling\n\n```bash\nnpm install angular-google-charts\n```\n\nThis will add the package to your package.json and install the required dependencies.\n\n### Importing\n\nImport the `GoogleChartsModule` in your `app.module.ts`:\n\n```typescript\nimport { GoogleChartsModule } from 'angular-google-charts';\n\n@NgModule({\n  ...\n  imports: [\n    ...\n    GoogleChartsModule,\n    ...\n  ],\n  ...\n})\nexport class AppModule {}\n```\n\nThis will allow you to use all of the features provided by this library.\n\n#### Configuring\n\nFor some use cases, it might be necessary to use some different config options than the default values.\n\nAll config options for Angular Google Charts are provided through a config object, which\ncan be passed to the library by importing the `GoogleChartsModule` using its `forRoot` method\nor by providing the `GOOGLE_CHARTS_LAZY_CONFIG` injection token with an `Observable\u003cGoogleChartsConfig\u003e` value.\n\n##### Using forRoot\n\nHere you will pass the options that are passed to the `google.charts.load` method in the normal JavaScript library.\nFor instance, to change the [version](https://developers.google.com/chart/interactive/docs/basic_load_libs#load-version-name-or-number)\n\n```typescript\nGoogleChartsModule.forRoot({ version: 'chart-version' }),\n```\n\nAnother example, to specify the Google Maps API key, or any other [Settings](https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings):\n\n```typescript\nGoogleChartsModule.forRoot({ mapsApiKey: '\u003cyour Google Maps API Key here\u003e' }),\n```\n\n##### Using lazy loading\n\n###### Option #1\n\n```typescript\n// Provide an observable through a service that fetches your chart configurations\n\n@Injectable()\nexport class GoogleChartsConfigService {\n  private configSubject = new ReplaySubject\u003cGoogleChartsConfig\u003e(1);\n  readonly config$ = this.configSubject.asObservable();\n\n  constructor(private http: HttpClient) {}\n\n  loadLazyConfigValues(): void {\n    this.http.post('https://special.config.api.com/getchartsconfig', {})\n      .pipe(take(1))\n      .subscribe(config =\u003e this.configSubject.next(config));\n  }\n}\n\n// Factory function that provides the config$ observable from your GoogleChartsConfigService\nexport function googleChartsConfigFactory(configService: GoogleChartsConfigService): Observable\u003cGoogleChartsConfig\u003e {\n  return configService.config$;\n}\n\n@NgModule({\n  ...\n  providers: [\n    GoogleChartsConfigService,\n    {provide: GOOGLE_CHARTS_LAZY_CONFIG, useFactory: googleChartsConfigFactory, deps: [GoogleChartsConfigService]}\n  ]\n})\nexport class AppModule {}\n\n```\n\n###### Option #2\n\n```typescript\n// Use a global subject (whether this violates best practices in your case is up to you).\n// This is just to point out a more simple way of achieving a lazy-loaded config.\nexport const googleChartsConfigSubject = new ReplaySubject\u003cGoogleChartsConfig\u003e(1);\n\n// Call this from anywhere you want\ngoogleChartsConfigSubject.next(config);\n\n// Your app.module\n@NgModule({\n  ...\n  providers: [\n    {provide: GOOGLE_CHARTS_LAZY_CONFIG, useValue: googleChartsConfigSubject.asObservable()}\n  ]\n})\nexport class AppModule {}\n```\n\n#### NOTE\n\n- You can provide options through the `forRoot` function **OR** the `GOOGLE_CHARTS_LAZY_CONFIG` token. You cannot use them interchangeably.\n- If you provide a lazy-loaded config object then the charts will not render until the observable has a value for the subscriber.\n\n## Charts\n\nThe easiest way to create a chart is using the `GoogleChartComponent`.\n\n```html\n\u003cgoogle-chart\u003e\u003c/google-chart\u003e\n```\n\nUsing the component, it is possible to create every chart in the Google Charts library.\nIt has a few important input properties, which are explained below.\n\n### Type\n\n```html\n\u003cgoogle-chart [type]=\"myType\"\u003e\u003c/google-chart\u003e\n```\n\nThe type of chart you want to create. Must be of type `ChartType`. Check [this file](https://github.com/FERNman/angular-google-charts/blob/master/projects/angular-google-charts/src/lib/types/chart-type.ts) for a list of the supported types\n\nTo see examples for all chart types and more information, visit the [google chart gallery](https://developers.google.com/chart/interactive/docs/gallery).\n\n### Data\n\n```html\n\u003cgoogle-chart [data]=\"myData\"\u003e\u003c/google-chart\u003e\n```\n\nThe data property expects an array of a certain shape, which depends on the chart type. Some chart types even support different data formats depending on the mode.\n\nExample with a chart that expects two-dimensional arrays:\n\n```typescript\nmyData = [\n  ['London', 8136000],\n  ['New York', 8538000],\n  ['Paris', 2244000],\n  ['Berlin', 3470000],\n  ['Kairo', 19500000],\n  ...\n];\n```\n\nThe 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.\n\nFormatters can also be passed as a separate input property, see [Formatters](#formatters);\n\n```typescript\nmyData = [\n  ['London', {v: 8136000, f: '8,1360'}],\n  ['New York', {v: 8538000, f: '8,530'}],\n  ...\n];\n```\n\nFor further information, please see the official [documentation](https://developers.google.com/chart/interactive/docs/reference#arraytodatatable) on `ArrayToDataTable`, which is the function used internally.\n\n### Columns\n\n```html\n\u003cgoogle-chart [columns]=\"chartColumns\"\u003e\u003c/google-chart\u003e\n```\n\nThe `columns` property expects an array describing the columns chart data array. The number of entries must match the length of the inner array passed in the `data` property.\nSome charts don't require columns. Whether your chart requires it can be check in the official documentation.\n\nContinuing with the simple two-dimensional example:\n\n```typescript\nchartColumns = ['City', 'Inhabitants'];\n```\n\nFor more complex formats an array of objects can be passed. For instance, the GeoChart in markers mode expects 4 columns of type number:\n\n```typescript\nchartColumns = [\n  { type: 'number', role: 'latitude' },\n  { type: 'number', role: 'longitude' },\n  { type: 'number', role: 'markerColor' },\n  { type: 'number', role: 'markerSize' }\n];\n```\n\n### Title\n\n```html\n\u003cgoogle-chart [title]=\"myTitle\"\u003e\u003c/google-chart\u003e\n```\n\nThe `title` property is optional and provided for convenience. It can also be included in the `options` property.\n\n### Width\n\n```html\n\u003cgoogle-chart [width]=\"myWidth\"\u003e\u003c/google-chart\u003e\n```\n\nThe `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.\nYou 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](#dynamic-resize).\n\n### Height\n\n```html\n\u003cgoogle-chart [height]=\"myHeight\"\u003e\u003c/google-chart\u003e\n```\n\nThe `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.\nYou 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](#dynamic-resize).\n\n### Options\n\n```html\n\u003cgoogle-chart [options]=\"myOptions\"\u003e\u003c/google-chart\u003e\n```\n\nThe `options` property is optional and allows to customize the chart to a great extent. How and what you can customize depends on the type of chart. For more information, please see the [google documentation](https://developers.google.com/chart/interactive/docs/customizing_charts).\n\n```typescript\n// example\nmyOptions = {\n  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],\n  is3D: true\n};\n```\n\n### Formatters\n\n```html\n\u003cgoogle-chart [formatters]=\"myFormatters\"\u003e\u003c/google-chart\u003e\n```\n\nThe `formatter` property is optional and allows to format the chart data. It requires an array of objects containing a formatter and an index.\n\nFor more information and all formatter types, please refer to the [documentation](https://developers.google.com/chart/interactive/docs/reference#formatters).\n\n```typescript\n// Formats the column with the index 1 and 3 to Date(long)\nmyFormatters = [\n  {\n    formatter: new google.visualization.DateFormat({ formatType: 'long' }),\n    colIndex: 1\n  },\n  {\n    formatter: new google.visualization.DateFormat({ formatType: 'long' }),\n    colIndex: 3\n  }\n];\n```\n\n_Note: When you get the error \"google is not defined\" whilst using the formatter in your component, you probably didn't load the google charts script. Please read the chapter on using the [ScriptLoaderService](#using-the-scriptloaderservice)._\n\n### Dynamic Resize\n\n```html\n\u003cgoogle-chart [dynamicResize]=\"dynamicResize\"\u003e\u003c/google-chart\u003e\n```\n\nThe `dynamicResize` property is optional and makes your chart redraw every time the window is resized.\nDefaults to `false` and should only be used when setting the width or height of the chart to a percentage value.\nOtherwise, the chart gets redrawn unnecessary and therefore slows down the site.\n\n### Styling\n\n```html\n\u003cgoogle-chart style=\"width: 100%;\"\u003e\u003c/google-chart\u003e\n```\n\nMost CSS properties should work exactly as you would expect them to.\nIf you want to have the chart full-width for example, set the width to `100%`.\n\n## Events\n\nThe `GoogleChartComponent` provides bindings for the most common Google Chart events.\n\n### Ready\n\nThe [`ready` event](https://developers.google.com/chart/interactive/docs/events#the-ready-event) is emitted as soon as the chart got drawn and after every subsequent redraw.\n\n```html\n\u003cgoogle-chart (ready)=\"onReady($event)\"\u003e\u003c/google-chart\u003e\n```\n\nThe event is of type `ChartReadyEvent`.\n\n### Error\n\nThe [`error` event](https://developers.google.com/chart/interactive/docs/events#the-error-event) is emitted 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:\n\n```html\n\u003cgoogle-chart (error)=\"onError($event)\"\u003e\u003c/google-chart\u003e\n```\n\nThe event is of type `ChartErrorEvent`.\n\n### Select\n\nThe [`select` event](https://developers.google.com/chart/interactive/docs/events#the-select-event) is emitted when an element in the chart gets selected.\n\n```html\n\u003cgoogle-chart (select)=\"onSelect($event)\"\u003e\u003c/google-chart\u003e\n```\n\nThe event of type `ChartSelectionChangedEvent` containing an array of selected values.\n\n### Mouseover\n\nThe `mouseover` event fires when the mouse hovers over one of the charts elements (i. e. a bar in a bar chart or a segment in a pie chart).\n\n```html\n\u003cgoogle-chart (mouseover)=\"OnMouseOver($event)\"\u003e\u003c/google-chart\u003e\n```\n\nThe event is of type `ChartMouseOverEvent`, where `column` is the index of the hovered column and `row` is the index of the hovered row.\n\n### Mouseleave\n\nThe `mouseleave` event fires when the mouse stops hovering one of the charts elements (i. e. a bar in a bar chart or a segment in a pie chart).\n\n```html\n\u003cgoogle-chart (mouseleave)=\"onMouseLeave($event)\"\u003e\u003c/google-chart\u003e\n```\n\nThe event is of type `ChartMouseLeaveEvent`, where `column` is the index of the no-longer hovered column and `row` is the index of the no-longer hovered row.\n\n## Controls and Dashboards\n\nGoogle Charts supports combining multiple charts into dashboards and giving users controls to manipulate what data they show, see [their documentation](https://developers.google.com/chart/interactive/docs/gallery/controls). Using this library, dashboards can be created easily.\n\nA dashboard component can be instantiated, which can contain child controls and charts. Every control must specify one or more charts they are controlling via their `for` property. It accepts a single chart as well as an array of charts, and one chart can be controlled by multiple controls.\n\n```html\n\u003cdashboard [columns]=\"dashboardColumns\" [data]=\"dashboardData\"\u003e\n  \u003ccontrol-wrapper [for]=\"dashboardChart\" [type]=\"controlFilterType\" [options]=\"controlOptions\"\u003e\u003c/control-wrapper\u003e\n  \u003cgoogle-chart #dashboardChart type=\"PieChart\" [width]=\"300\" [height]=\"300\"\u003e \u003c/google-chart\u003e\n\u003c/dashboard\u003e\n```\n\nWhen creating dashboards, the charts themselves are not responsible for drawing, which means their `columns`, `data`, and (optional) `formatter` properties are unused. Instead, the dashboard is responsible for drawing. It therefore accepts data in the same format as charts do through the `columns`, `data`, and `formatter` properties.\n\nNote that charts in a dashboard will not be visible if they are not referenced in at least one control.\n\n## Editing Charts\n\nGoogle Charts comes with a full-fledged [chart editor](https://developers.google.com/chart/interactive/docs/reference#google_visualization_charteditor),\nallowing users to configure charts the way they want.\n\nAngular-Google-Charts includes a component wrapping the native `ChartEditor`, the `ChartEditorComponent`.\nIt has to be instantiated in HTML and can be used to edit charts by calling its `editChart` method.\n\n```html\n\u003c!--my.component.html--\u003e\n\u003cchart-editor\u003e\u003c/chart-editor\u003e\n\n\u003cgoogle-chart #editable\u003e\u003c/google-chart\u003e\n\u003cbutton (click)=\"editChart(editable)\"\u003eEdit\u003c/button\u003e\n```\n\n```typescript\n// my.component.ts\nclass MyComp {\n  @ViewChild(ChartEditorComponent)\n  public readonly editor: ChartEditorComponent;\n\n  public editChart(chart: ChartBase) {\n    this.editor\n      .editChart(chart)\n      .afterClosed()\n      .subscribe(result =\u003e {\n        if (result) {\n          // Saved\n        } else {\n          // Cancelled\n        }\n      });\n  }\n}\n```\n\n`editChart` returns a handle to the open dialog which can be used to close the edit dialog.\n\nNote that only one chart can be edited by a chart editor at a time.\n\n## Advanced\n\n### Accessing the chart wrapper directly\n\nI case you don't need any of the special features the `GoogleChartsComponent` provides, the `ChartWrapperComponent` can be used.\nIt is a direct wrapper of the [`ChartWrapper`](https://developers.google.com/chart/interactive/docs/reference#chartwrapper-class)..\n\n```html\n\u003cchart-wrapper [specs]=\"chartWrapperSpecs\"\u003e\u003c/chart-wrapper\u003e\n```\n\nThe `ChartWrapperComponent` should be used if you need fine-grained control over the data you are providing or you want to use e.g.\nthe query feature that Google Charts provides, which is not supported using the `GoogleChartComponent`.\n\n### Using the `ScriptLoaderService`\n\nIf a specific chart is created a lot in your application, you may want to create custom components.\n\nWhen doing so, you need to load the chart packages by yourself.\nThe `ScriptLoaderService` provides a few methods helping with this.\n\n```typescript\nclass MyComponent {\n  private readonly chartPackage = getPackageForChart(ChartType.BarChart);\n\n  @ViewChild('container', { read: ElementRef })\n  private containerEl: ElementRef\u003cHTMLElement\u003e;\n\n  constructor(private loaderService: ScriptLoaderService) {}\n\n  ngOnInit() {\n    this.loaderService.loadChartPackages(this.chartPackage).subscribe(() =\u003e {\n      // Start creating your chart now\n      const char = new google.visualization.BarChart(this.containerEl.nativeElement);\n    });\n  }\n}\n```\n\nThe `loadChartPackages` method can also be called without any parameters. This way, only the default\ngoogle charts packages will be loaded. These include the namespaces `google.charts` and `google.visualization`, but no charts.\n\n### Preloading the Google Charts script\n\nIf the existence of charts is crucial to your application, you may want to decrease the time it takes until the first chart becomes visible.\nThis can be achieved by loading the Google Charts script concurrently with the rest of the application.\nIn the playground application, this reduces the time until the first chart appears by roughly 20%, which means for\nexample about 4 seconds when using the \"Slow 3G\" profile in Chrome DevTools.\n\nTo achieve this, two scripts have to be added to the `index.html` file in your apps' root folder.\nThe first one loads the generic Google Charts script, the second one the version-specific parts of the library needed to load charts.\n\nIn the code below, `\u003cchart_version\u003e` has to be replaced with the **exact** of the Google Charts library that you want to use and must match the version you use when importing the `GoogleChartsModule`.\n\nThe only exception to this is version `46`. All minor versions of Google Charts v46 require the loader to be of version `46.2`.\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\" async\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/\u003cchart_version\u003e/loader.js\" async\u003e\u003c/script\u003e\n```\n\nPlease note that this can increase the time it takes until Angular is fully loaded.\nI suggest doing some benchmarks with your specific application before deploying this to production.\n\n## License\n\nThis project is provided under the [MIT license](https://github.com/FERNman/angular-google-charts/blob/master/LICENSE.md).\n","funding_links":[],"categories":["Uncategorized","Recently Updated","Third Party Components"],"sub_categories":["Uncategorized","[Sep 16, 2024](/content/2024/09/16/README.md)","Charts"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFERNman%2Fangular-google-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFERNman%2Fangular-google-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFERNman%2Fangular-google-charts/lists"}