How to add 'tooltip' to Timeline chart in angular-google-charts?

Question

I'm trying to add tooltip to Timeline chart using angular-google-charts library in Angular 7 application. When I add a fifth column at index = 2, angular-google-charts throws as error saying "Expecting 4 columns not 5"

When I remove the tooltip column providing only 4 columns (Group, Row, Start, End) the Timeline visualisation works fine. However as soon as I add the Tooltip column it throws error saying expecting 4 columns but received 5.

component.ts

type: string = 'Timeline'
chartData: Array<Array<any>> = [
  ['Group1', 'Row1', 'Tooltip1', new Date(2019, 01, 01), new Date(2019, 02, 01)],
  ['Group2', 'Row2', 'Tooltip2', new Date(2019, 03, 01), new Date(2019, 04, 01)]
]
colNames: Array<any> = ["Group", "Row", "Tooltip", "Start", "End"] 
colRoles: Array<any> = [
  { role: 'tooltip', type: 'string', index: 2, p: {html: true} },
]
options: {} = { tooltip: {isHtml: true} }

component.html

<google-chart 
    [type]="type"
    [data]="chartData" 
    [options]="options" 
    [columnNames]="colNames"
    [roles]="colRoles">
</google-chart>

app.module.ts

import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
...
imports: [
  GoogleChartsModule
],

I expect the tooltip to show the additional text I am putting in the column index 2. Please help me sort this out.

Answer 1

when not using angular, the roles are included with the column names.
I've never seen the roles added separately.

try adding the role within the column names, as follows...

type: string = 'Timeline'
chartData: Array<Array<any>> = [
  ['Group1', 'Row1', 'Tooltip1', new Date(2019, 01, 01), new Date(2019, 02, 01)],
  ['Group2', 'Row2', 'Tooltip2', new Date(2019, 03, 01), new Date(2019, 04, 01)]
]
colNames: Array<any> = ["Group", "Row", { role: 'tooltip', type: 'string', p: {html: true} }, "Start", "End"] 
options: {} = { tooltip: {isHtml: true} }

and exclude the roles here...

<google-chart 
    [type]="type"
    [data]="chartData" 
    [options]="options" 
    [columnNames]="colNames"
</google-chart>