Trying to utilize the angular-google-charts library in Angular 13.2, I am working on creating a TreeMap with a customized tooltip feature. The GoogleChartComponent offers an options property called generateTooltip which requires a callback function. My goal is to access data stored within the Angular component (specifically chart.data) from within this callback function. Unfortunately, I have been struggling to retrieve the component's property while inside the callback function. The examples available on Google's website are primarily focused on standard JavaScript implementations.
<!-- dashboard.component.html -->
<google-chart
[data]="chart.data"
[options]="chart.options"
[title]="chart.title"
[type]="chart.type"
[columns]="chart.columns"
[height]="chart.height"
style="width: 100%"
></google-chart>
// dashboard.component.ts
import { Component, OnInit } from '@angular/core'
import { ChartType} from 'angular-google-charts'
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
public chart = {
title: '',
type: ChartType.TreeMap,
data: [
['Global', null, 0, 0, 'Global'],
['Americas', 'Global', 0, 0, 'Global'],
['EMEA', 'Global', 0, 0, 'Global'],
['Acme - Lab 1YR (New)', 'Americas', 326000, 100, 'Susan Moore'],
['Flexa - DevOps 1YR (New)', 'Americas', 206000, 0, 'Jeremy Young'],
['Organo - CI/CD 1YR (New)', 'EMEA', 188000, 0, 'Sif Nilsen'],
['Ny Carlsberg Glyptotek - Automated Test Lab 300 devices 1YR (New)', 'EMEA', 212000, 0, 'Nils Peter Bjørnsen'],
['Dunder Mifflin - SCM 2YR (New)', 'Americas', 448000, 50, 'Justin Case']
],
columns: [
{type: 'string', label: 'Opportunity', role: 'domain'},
{type: 'string', label: 'Parent', role: 'data'},
{type: 'number', label: 'Amount', role: 'tooltip'},
{type: 'number', label: 'Score', role: 'data'},
{type: 'string', label: 'Owner', role: 'tooltip'}
],
options: {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 0,
fontFamily: 'Nunito',
fontSize: 13,
fontColor: 'black',
generateTooltip: this._showFullTooltip
},
height: 290,
}
constructor () {
}
_showFullTooltip(row: number, size: number, value: number) {
// This is where I need to get values out of this.chart.data[row]
const amount = size.toLocaleString('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });
const tooltip = `<div style="color:#fff; background:#313A4B; padding: 10px; border-width:1px; border-style: solid; border-color:#fff;">${amount}</div>`
return tooltip;
}
}
The current issue arises when trying to grab pertinent information using the row parameter within the callback that gets passed. Directly accessing this.chart.data[row] has proven to be unsuccessful. It seems like the problem might stem from the interaction between the callback function and Angular itself. Are there any suggestions or best practices for connecting the _showFullTooltip() function with component properties effectively?