Google Timeline chart using does not show full row label in angular

Question

Hi I have just started using google charts and I found that the labels in the first column don't show entirely. I'm using these charts in angular 9.0.3 with ng2-google-charts as the module. I have tried changing the width ,height and a bunch of other options but the labels don't show. Here is the image of the resulting chart.

Image of how the chart looks like -

This is my code below

import { Component, OnInit } from '@angular/core';
import { GoogleChartInterface } from 'ng2-google-charts';

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html'
})
export class GroupAnalysisPageComponent implements OnInit {
  
  constructor() { }

  timelineChart: GoogleChartInterface = {
    chartType: 'Timeline',
    dataTable: [
      ['Name', 'From', 'To'],
      [ 'Washington',new Date(1789, 3, 29), new Date(1797, 2, 3) ],
      [ 'Adams',  new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
      [ 'Jefferson', new Date(1801, 2, 3),  new Date(1809, 2, 3) ]
    ],
    options: {
      'width': 1200,
      'avoidOverlappingGridLines':false
    },
  };
}

Here is my template

<div [hidden]="condition">
  <google-chart [data]="timelineChart"></google-chart>
<div>

Answer 1

this occurs when the chart is drawn in a hidden container, and then shown later.
when the container is hidden, the chart cannot properly calculate the width of the labels.

see following working snippet, which duplicates the issue, by using --> display: none;

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var dataTable = google.visualization.arrayToDataTable([
    ['Name', 'From', 'To'],
    [ 'Washington',new Date(1789, 3, 29), new Date(1797, 2, 3) ],
    [ 'Adams',  new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
    [ 'Jefferson', new Date(1801, 2, 3),  new Date(1809, 2, 3) ]
  ]);

  var options = {
    'width': 1200,
    'avoidOverlappingGridLines':false
  };

  var container = document.getElementById('chart');
  var chart = new google.visualization.Timeline(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    container.style.display = null;
  });
  chart.draw(dataTable, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart" style="display: none;"></div>

---

however, if the container is shown before drawing the chart,
the labels are displayed properly.

see following working snippet...

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var dataTable = google.visualization.arrayToDataTable([
    ['Name', 'From', 'To'],
    [ 'Washington',new Date(1789, 3, 29), new Date(1797, 2, 3) ],
    [ 'Adams',  new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
    [ 'Jefferson', new Date(1801, 2, 3),  new Date(1809, 2, 3) ]
  ]);

  var options = {
    'width': 1200,
    'avoidOverlappingGridLines':false
  };

  var container = document.getElementById('chart');
  var chart = new google.visualization.Timeline(container);
  container.style.display = null;
  chart.draw(dataTable, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart" style="display: none;"></div>