x-axis of Gantt Chart is present in DOM but not rendered to screen

[vitale232]

Bug Report

Description

I'm using 2.2.2 of angular-google-charts. Thanks for the great package!

I'm attempting to replicate the Grouping Resources Gantt Chart from the Google Documentation using this library. In the Google example, you'll see that the x-axis is labeled with time. When I render out the chart using angular-google-charts, there is no x-axis on the screen. Interestingly, the <text> elements appear to be in the DOM when examined via DevTools or queried via querySelector.

To reproduce

Steps to reproduce the behavior:

1. Go to this StackBlitz example
2. Observe the rendered chart and compare it to the Google example
3. Note the absence of the x-axis in the StackBlitz
4. Scroll down to the "SVG Structure" heading -- it appears (to me, at least) that the text element is in the DOM, but it's not appearing on the screen.

Expected behaviour

I'd expect the x-axis of the Gantt Chart to be present.

Your Environment

Package JSON

```json "dependencies": { "@angular/animations": "~12.1.0", "@angular/cdk": "^12.1.0", "@angular/common": "~12.1.0", "@angular/compiler": "~12.1.0", "@angular/core": "~12.1.0", "@angular/forms": "~12.1.0", "@angular/material": "^12.2.1", "@angular/platform-browser": "~12.1.0", "@angular/platform-browser-dynamic": "~12.1.0", "@angular/router": "~12.1.0", "@vhb-map/auth": "^0.11.1", "@vhb-map/cdk": "^0.11.1", "@vhb-map/core": "^0.11.1", "angular-google-charts": "^2.2.2", "rxjs": "~6.6.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~12.1.0", "@angular/cli": "~12.1.0", "@angular/compiler-cli": "~12.1.0", "@esri/arcgis-rest-feature-layer": "^3.2.1", "@esri/arcgis-rest-types": "^3.2.1", "@types/jasmine": "~3.8.0", "@types/node": "^12.11.1", "jasmine-core": "~3.8.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "~1.7.0", "typescript": "~4.3.5" } ```

Anything else?

I'm new to Google Charts, so there's a chance this is User Error 🙃

[vitale232]

My issue was solved by passing in an explicit height to the GoogleChartsComponent as an Input. It's fixed in this Blitz.

Before:

<google-chart
  #chart
  [type]="chartType"
  [data]="data"
  [columns]="columns"
  [options]="{ width: '600px' }"
></google-chart>

After:

<google-chart
  #chart
  [height]="250"
  [width]="700"
  [type]="chartType"
  [data]="data"
  [columns]="columns"
></google-chart>