angular-google-charts doesn´t work in angular 19

Author: Robinl2018Created Jan 15, 2025Updated Aug 27, 2025

Hi, I have an application in angular 19, I use angular-google-charts, but it doesn't work

I need to show a pie and a bar chart

This is my html code:

This is my component code:

import { Component, OnInit } from '@angular/core'; import { GoogleChartsModule, ChartType, Column } from 'angular-google-charts'; import { NgFor } from '@angular/common';

@Component({ selector: 'app-dashboar', imports: [GoogleChartsModule, NgFor], templateUrl: './dashboar.component.html', styleUrl: './dashboar.component.scss', standalone: true }) export class DashboarComponent implements OnInit {

public charts: { title: string; type: ChartType; data: any[][]; columns?: Column[]; options?: {}; }[] = [];

constructor() { this.charts.push({ title: 'Pie Chart', type: ChartType.PieChart, columns: ['Task', 'Hours per Day'], data: [ ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ] });

this.charts.push({
     title: 'Bar Chart',
     type: ChartType.BarChart,
     columns: ['Element', 'Density', { role: 'style', type: 'string' }],
     data: [
         ['Copper', 8.94, '#b87333'],
         ['Silver', 10.49, 'silver'],
         ['Gold', 19.3, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2']
     ]
});

} }

This is the main.ts file:

import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app/app.component'; import { GoogleChartsConfigService, googleChartsConfigFactory } from './app/services/gchart.service'; import { GOOGLE_CHARTS_LAZY_CONFIG } from 'angular-google-charts';

bootstrapApplication(AppComponent, {providers: GoogleChartsConfigService, {provide: GOOGLE_CHARTS_LAZY_CONFIG, useFactory: googleChartsConfigFactory, deps: [GoogleChartsConfigService]} ] } ) .catch(err => console.error(err));

When I start the application, it doesn´t show the charts, and it doesn´t show any error. Could anyone help me please?

Source: node-schedule/node-schedule