Hello, I'm currently trying to implement a Treemap within my Angular
application. I have it working, but the only issue I'm facing is that I'd
like to have a multi-line title for each node. I want to have the title,
then display a value directly underneath for each node. I've tried adding
\n, <br> etc. to the title value in the data array but nothing works. I've
included the relevant code, any advice would be greatly appreciated.
SetupTreemap() {
this.googleChartLibrary = (<any>window).google;
this.googleChartLibrary.charts.load('current',
{'packages':['treemap']});
this.googleChartLibrary.charts.setOnLoadCallback(this.DrawTreemap.bind(this));
}
DrawTreemap () {
let treemapData =
this.googleChartLibrary.visualization.arrayToDataTable([
['Title', 'Parent', 'Size', 'Color'],
['Global',null,0,0],
['Header 1' + '(This should be on line 2)','Global',144179.10,0],
['Header 2','Global',58095.20,25],
['Header 3','Global',143034.89,50],
['Header 4','Global',36163.36,75],
['Header 5','Global',28000,100],
]);
let tree = new
this.googleChartLibrary.visualization.TreeMap(document.getElementById('treemap-div'));
this.googleChartLibrary.visualization.events.addListener(tree,
'select', function () {
tree.setSelection([]);
});
tree.draw(treemapData, {
minColor: this._chartColor1,
midColor: this._chartColor2,
maxColor: this._chartColor3,
textStyle: {
color: '#ffffff',
fontSize: 16,
bold: true,
italic:false
},
showScale: false,
showTooltips: false,
maxDepth: 1,
height: 350,
headerHeight: 0,
highlightOnMouseOver: false,
useWeightedAverageForAggregation: true
});
}
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/94b43ae5-1dd1-48bd-9f36-a68a2e725039%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
