# Treemaps

1. [Overview](https://developers.google.com/chart/interactive/docs/gallery/treemap#Overview)
2. [Example](https://developers.google.com/chart/interactive/docs/gallery/treemap#Example)
3. [Highlights](https://developers.google.com/chart/interactive/docs/gallery/treemap#Highlights)
4. [Tooltips](https://developers.google.com/chart/interactive/docs/gallery/treemap#Tooltips)
5. [Loading](https://developers.google.com/chart/interactive/docs/gallery/treemap#Loading)
6. [Data Format](https://developers.google.com/chart/interactive/docs/gallery/treemap#Data_Format)
7. [Configuration Options](https://developers.google.com/chart/interactive/docs/gallery/treemap#Configuration_Options)
8. [Methods](https://developers.google.com/chart/interactive/docs/gallery/treemap#Methods)
9. [Events](https://developers.google.com/chart/interactive/docs/gallery/treemap#Events)
10. [Data Policy](https://developers.google.com/chart/interactive/docs/gallery/treemap#Data_Policy)

## Overview

A visual representation of a data tree, where each node can have
zero or more children, and one parent (except for the root, which
has no parents). Each node is displayed as a rectangle, sized and
colored according to values that you assign. Sizes and colors are
valued relative to all other nodes in the graph. You can specify how
many levels to display simultaneously, and optionally to display
deeper levels in a hinted fashion. If a node is a leaf node, you can
specify a size and color; if it is not a leaf, it will be displayed
as a bounding box for leaf nodes. The default behavior is to move
down the tree when a user left-clicks a node, and to move back up
the tree when a user right-clicks the graph.

The total size of the graph is determined by the size of the containing element
that you insert in your page. If you have leaf nodes with names too long to show,
the name will be truncated with an ellipsis (...).

## Example

\<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"\>\</script\> \<div id="chart_div" style="width: 900px; height: 500px;"\>\</div\> google.charts.load('current', {'packages':\['treemap'\]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable(\[ \['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'\], \['Global', null, 0, 0\], \['America', 'Global', 0, 0\], \['Europe', 'Global', 0, 0\], \['Asia', 'Global', 0, 0\], \['Australia', 'Global', 0, 0\], \['Africa', 'Global', 0, 0\], \['Brazil', 'America', 11, 10\], \['USA', 'America', 52, 31\], \['Mexico', 'America', 24, 12\], \['Canada', 'America', 16, -23\], \['France', 'Europe', 42, -11\], \['Germany', 'Europe', 31, -2\], \['Sweden', 'Europe', 22, -13\], \['Italy', 'Europe', 17, 4\], \['UK', 'Europe', 21, -5\], \['China', 'Asia', 36, 4\], \['Japan', 'Asia', 20, -12\], \['India', 'Asia', 40, 63\], \['Laos', 'Asia', 4, 34\], \['Mongolia', 'Asia', 1, -5\], \['Israel', 'Asia', 12, 24\], \['Iran', 'Asia', 18, 13\], \['Pakistan', 'Asia', 11, -52\], \['Egypt', 'Africa', 21, 0\], \['S. Africa', 'Africa', 30, 43\], \['Sudan', 'Africa', 12, 2\], \['Congo', 'Africa', 10, 12\], \['Zaire', 'Africa', 8, 10\] \]); tree = new google.visualization.TreeMap(document.getElementById('chart_div')); tree.draw(data, { minColor: '#f00', midColor: '#ddd', maxColor: '#0d0', headerHeight: 15, fontColor: 'black', showScale: true }); }

```html
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
          ['Global',    null,                 0,                               0],
          ['America',   'Global',             0,                               0],
          ['Europe',    'Global',             0,                               0],
          ['Asia',      'Global',             0,                               0],
          ['Australia', 'Global',             0,                               0],
          ['Africa',    'Global',             0,                               0],
          ['Brazil',    'America',            11,                              10],
          ['USA',       'America',            52,                              31],
          ['Mexico',    'America',            24,                              12],
          ['Canada',    'America',            16,                              -23],
          ['France',    'Europe',             42,                              -11],
          ['Germany',   'Europe',             31,                              -2],
          ['Sweden',    'Europe',             22,                              -13],
          ['Italy',     'Europe',             17,                              4],
          ['UK',        'Europe',             21,                              -5],
          ['China',     'Asia',               36,                              4],
          ['Japan',     'Asia',               20,                              -12],
          ['India',     'Asia',               40,                              63],
          ['Laos',      'Asia',               4,                               34],
          ['Mongolia',  'Asia',               1,                               -5],
          ['Israel',    'Asia',               12,                              24],
          ['Iran',      'Asia',               18,                              13],
          ['Pakistan',  'Asia',               11,                              -52],
          ['Egypt',     'Africa',             21,                              0],
          ['S. Africa', 'Africa',             30,                              43],
          ['Sudan',     'Africa',             12,                              2],
          ['Congo',     'Africa',             10,                              12],
          ['Zaire',     'Africa',             8,                               10]
        ]);

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>
```

## Highlights


You can specify whether elements should highlight, and set specific colors for
certain elements to use when this occurs. To turn on highlighting, set
`highlightOnMouseOver:true` (for v49 or before) or `enableHighlight: true` (for v50+).
From there, you can set your colors to use
for highlighting elements using the various `HighlightColor` options.
\<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"\>\</script\> \<div id="chart_div"\>\</div\> google.charts.load('current', {'packages':\['treemap'\]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'ID'); data.addColumn('string', 'Parent'); data.addColumn('number', 'Number Of Lines'); data.addRows(\[ \['Shakespeare', null, 0\], \['Comedies', 'Shakespeare', null\], \['Tragedies', 'Shakespeare', null\], \['Histories', 'Shakespeare', null\], \['As You Like It', 'Comedies', null\], \['Adam', 'As You Like It', 10\], \['Amiens', 'As You Like It', 10\], \['Audrey', 'As You Like It', 12\], \['Celia', 'As You Like It', 108\], \['Charles', 'As You Like It', 8\], \['Corin', 'As You Like It', 24\], \['Dennis', 'As You Like It', 2\], \['Duke', 'As You Like It', 32\], \['Frederick', 'As You Like It', 20\], \['Hymen', 'As You Like It', 1\], \['Jaques (lord)', 'As You Like It', 57\], \['Jaques (son)', 'As You Like It', 2\], \['Le Beau', 'As You Like It', 14\], \['Oliver', 'As You Like It', 37\], \['Orlando', 'As You Like It', 120\], \['Phebe', 'As You Like It', 23\], \['Rosalind', 'As You Like It', 201\], \['Silvius', 'As You Like It', 24\], \['Sir Oliver Martext', 'As You Like It', 3\], \['Touchstone', 'As You Like It', 74\], \['William', 'As You Like It', 11\], \['Comedy Of Errors', 'Comedies', null\], \['Adriana', 'Comedy Of Errors', 79\], \['Aegeon', 'Comedy Of Errors', 17\], \['Aemilia', 'Comedy Of Errors', 16\], \['Angelo', 'Comedy Of Errors', 31\], \['Antipholus of Ephesus', 'Comedy Of Errors', 76\], \['Antipholus of Syracuse', 'Comedy Of Errors', 103\], \['Balthazar', 'Comedy Of Errors', 5\], \['Courtezan', 'Comedy Of Errors', 11\], \['Dromio of Ephesus', 'Comedy Of Errors', 63\], \['Dromio of Syracuse', 'Comedy Of Errors', 99\], \['Luce', 'Comedy Of Errors', 7\], \['Luciana', 'Comedy Of Errors', 43\], \['Pinch', 'Comedy Of Errors', 6\], \['Solinus', 'Comedy Of Errors', 22\], \['Merchant Of Venice', 'Comedies', null\], \['Antonio', 'Merchant Of Venice', 47\], \['Balthasar', 'Merchant Of Venice', 1\], \['Bassanio', 'Merchant Of Venice', 73\], \['Duke (of Venice)', 'Merchant Of Venice', 18\], \['Gratiano', 'Merchant Of Venice', 48\], \['Jessica', 'Merchant Of Venice', 26\], \['Launcelot Gobbo', 'Merchant Of Venice', 44\], \['Leonardo', 'Merchant Of Venice', 2\], \['Lorenzo', 'Merchant Of Venice', 47\], \['Nerissa', 'Merchant Of Venice', 36\], \['Old Gobbo', 'Merchant Of Venice', 19\], \['Portia', 'Merchant Of Venice', 117\], \['Prince of Arragon', 'Merchant Of Venice', 4\], \['Prince of Morocco', 'Merchant Of Venice', 7\], \['Salanio', 'Merchant Of Venice', 18\], \['Salarino', 'Merchant Of Venice', 27\], \['Salerio', 'Merchant Of Venice', 6\], \['Shylock', 'Merchant Of Venice', 79\], \['Stephano', 'Merchant Of Venice', 3\], \['Tubal', 'Merchant Of Venice', 8\], \['Midsummer Night\\'s Dream', 'Comedies', null\], \['Bottom', 'Midsummer Night\\'s Dream', 59\], \['Cobweb', 'Midsummer Night\\'s Dream', 4\], \['Demetrius', 'Midsummer Night\\'s Dream', 48\], \['Egeus', 'Midsummer Night\\'s Dream', 7\], \['Fairy', 'Midsummer Night\\'s Dream', 4\], \['Flute', 'Midsummer Night\\'s Dream', 18\], \['Helena', 'Midsummer Night\\'s Dream', 36\], \['Hermia', 'Midsummer Night\\'s Dream', 48\], \['Hippolyta', 'Midsummer Night\\'s Dream', 14\], \['Lysander', 'Midsummer Night\\'s Dream', 50\], \['Moth', 'Midsummer Night\\'s Dream', 2\], \['Mustardseed', 'Midsummer Night\\'s Dream', 5\], \['Oberon', 'Midsummer Night\\'s Dream', 29\], \['Peaseblossom', 'Midsummer Night\\'s Dream', 4\], \['Philostrate', 'Midsummer Night\\'s Dream', 6\], \['Puck', 'Midsummer Night\\'s Dream', 33\], \['Quince', 'Midsummer Night\\'s Dream', 40\], \['Snout', 'Midsummer Night\\'s Dream', 9\], \['Snug', 'Midsummer Night\\'s Dream', 4\], \['Starveling', 'Midsummer Night\\'s Dream', 7\], \['Theseus', 'Midsummer Night\\'s Dream', 48\], \['Titania', 'Midsummer Night\\'s Dream', 23\], \['Taming Of The Shrew', 'Comedies', null\], \['Baptista Minola', 'Taming Of The Shrew', 68\], \['Bianca', 'Taming Of The Shrew', 29\], \['Biondello', 'Taming Of The Shrew', 39\], \['Christopher Sly', 'Taming Of The Shrew', 24\], \['Curtis', 'Taming Of The Shrew', 20\], \['Gremio', 'Taming Of The Shrew', 58\], \['Grumio', 'Taming Of The Shrew', 63\], \['Haberdasher', 'Taming Of The Shrew', 1\], \['Hortensio', 'Taming Of The Shrew', 70\], \['Joseph', 'Taming Of The Shrew', 1\], \['Katherina', 'Taming Of The Shrew', 82\], \['Lucentio', 'Taming Of The Shrew', 61\], \['Nathaniel', 'Taming Of The Shrew', 4\], \['Nicholas', 'Taming Of The Shrew', 1\], \['Peter', 'Taming Of The Shrew', 2\], \['Petruchio', 'Taming Of The Shrew', 158\], \['Philip', 'Taming Of The Shrew', 1\], \['Tranio', 'Taming Of The Shrew', 90\], \['Vincentio', 'Taming Of The Shrew', 23\], \['The Tempest', 'Comedies', null\], \['Adrian', 'The Tempest', 9\], \['Alonso', 'The Tempest', 40\], \['Antonio, duke of Milan', 'The Tempest', 57\], \['Ariel', 'The Tempest', 45\], \['Caliban', 'The Tempest', 50\], \['Ceres', 'The Tempest', 4\], \['Ferdinand', 'The Tempest', 31\], \['Francisco', 'The Tempest', 2\], \['Gonzalo', 'The Tempest', 52\], \['Iris', 'The Tempest', 4\], \['Juno', 'The Tempest', 2\], \['Master', 'The Tempest', 2\], \['Miranda', 'The Tempest', 50\], \['Nymphs', 'The Tempest', 0\], \['Prospero', 'The Tempest', 114\], \['Reapers', 'The Tempest', 0\], \['Sebastian', 'The Tempest', 67\], \['Stephano (Servant to Portia)', 'The Tempest', 60\], \['Trinculo', 'The Tempest', 39\], \['Henry VIII', 'Histories', null\], \['Anne Bullen', 'Henry VIII', 18\], \['Archbishop Cranmer', 'Henry VIII', 21\], \['Bishop Lincoln', 'Henry VIII', 2\], \['Brandon', 'Henry VIII', 6\], \['Capucius', 'Henry VIII', 5\], \['Cardinal Campeius', 'Henry VIII', 14\], \['Cardinal Wolsey', 'Henry VIII', 79\], \['Cromwell', 'Henry VIII', 21\], \['Doctor Butts', 'Henry VIII', 4\], \['Duke of Buckingham', 'Henry VIII', 26\], \['Duke of Norfolk', 'Henry VIII', 48\], \['Duke of Suffolk', 'Henry VIII', 30\], \['Earl of Surrey', 'Henry VIII', 24\], \['First Secretary to Wolsey', 'Henry VIII', 2\], \['Gardiner', 'Henry VIII', 22\], \['Garter', 'Henry VIII', 1\], \['Griffith', 'Henry VIII', 13\], \['King Henry VIII', 'Henry VIII', 81\], \['Lord Abergavenny', 'Henry VIII', 5\], \['Lord Chamberlain', 'Henry VIII', 38\], \['Lord Chancellor', 'Henry VIII', 7\], \['Lord Sands', 'Henry VIII', 17\], \['Old Lady', 'Henry VIII', 14\], \['Patience', 'Henry VIII', 3\], \['Porter (door-keeper of the Council-chamber)', 'Henry VIII', 10\], \['Queen Katharine', 'Henry VIII', 50\], \['Sir Anthony Denny', 'Henry VIII', 3\], \['Sir Henry Guildford', 'Henry VIII', 1\], \['Sir Nicholas Vaux', 'Henry VIII', 1\], \['Sir Thomas Lovell', 'Henry VIII', 21\], \['Surveyor to the Duke of Buckingham', 'Henry VIII', 9\], \['History Of King John', 'Histories', null\], \['Arthur Duke of Bretagne', 'History Of King John', 23\], \['Blanch', 'History Of King John', 9\], \['Cardinal Pandulph', 'History Of King John', 23\], \['Chatillon', 'History Of King John', 5\], \['Constance', 'History Of King John', 36\], \['Essex', 'History Of King John', 1\], \['Faulconbridge', 'History Of King John', 4\], \['Hubert de Burgh', 'History Of King John', 52\], \['James Gurney', 'History Of King John', 1\], \['King John', 'History Of King John', 95\], \['King Phillip', 'History Of King John', 43\], \['Lady Faulconbridge', 'History Of King John', 5\], \['Lewis the Dauphin', 'History Of King John', 29\], \['Lord Bigot', 'History Of King John', 6\], \['Lymoges duke of Austria', 'History Of King John', 16\], \['Melun', 'History Of King John', 3\], \['Pembroke earl of Pembroke', 'History Of King John', 20\], \['Peter of Pomfret', 'History Of King John', 1\], \['Philip the Bastard', 'History Of King John', 89\], \['Prince Henry', 'History Of King John', 8\], \['Queen Elinor', 'History Of King John', 22\], \['Salisbury earl of Salisbury', 'History Of King John', 36\], \['Antony And Cleopatra', 'Tragedies', null\], \['Agrippa', 'Antony And Cleopatra', 28\], \['Alexas', 'Antony And Cleopatra', 15\], \['Antony', 'Antony And Cleopatra', 202\], \['Canidius', 'Antony And Cleopatra', 10\], \['Captain', 'Antony And Cleopatra', 1\], \['Charmian', 'Antony And Cleopatra', 63\], \['Cleopatra', 'Antony And Cleopatra', 204\], \['Demetrius (Friend to Antony)', 'Antony And Cleopatra', 2\], \['Dercetas', 'Antony And Cleopatra', 5\], \['Diomedes', 'Antony And Cleopatra', 7\], \['Dolabella', 'Antony And Cleopatra', 23\], \['Domitius Enobarus', 'Antony And Cleopatra', 113\], \['Egyptian', 'Antony And Cleopatra', 2\], \['Eros', 'Antony And Cleopatra', 27\], \['Euphronius', 'Antony And Cleopatra', 5\], \['Gallus', 'Antony And Cleopatra', 1\], \['Iras', 'Antony And Cleopatra', 18\], \['Lepidus', 'Antony And Cleopatra', 30\], \['Mardian', 'Antony And Cleopatra', 7\], \['Mecaenas', 'Antony And Cleopatra', 16\], \['Menas', 'Antony And Cleopatra', 35\], \['Menecrates', 'Antony And Cleopatra', 2\], \['Octavia', 'Antony And Cleopatra', 13\], \['Octavius', 'Antony And Cleopatra', 98\], \['Philo', 'Antony And Cleopatra', 2\], \['Pompey', 'Antony And Cleopatra', 41\], \['Proculeius', 'Antony And Cleopatra', 10\], \['Scarus', 'Antony And Cleopatra', 12\], \['Seleucus', 'Antony And Cleopatra', 3\], \['Silius', 'Antony And Cleopatra', 3\], \['Taurus', 'Antony And Cleopatra', 1\], \['Thyreus', 'Antony And Cleopatra', 12\], \['Varrius', 'Antony And Cleopatra', 1\], \['Ventidius', 'Antony And Cleopatra', 4\], \['Coriolanus', 'Tragedies', null\], \['Aedile', 'Coriolanus', 10\], \['Cominius', 'Coriolanus', 67\], \['Coriolanus (Caius Marcius Coriolanus)', 'Coriolanus', 189\], \['Junius Brutus', 'Coriolanus', 91\], \['Lieutenant', 'Coriolanus', 4\], \['Menenius Agrippa', 'Coriolanus', 162\], \['Patrician', 'Coriolanus', 3\], \['Roman', 'Coriolanus', 10\], \['Sicinius Velutus', 'Coriolanus', 117\], \['Titus Lartius', 'Coriolanus', 23\], \['Tullus Aufidius', 'Coriolanus', 45\], \['Valeria', 'Coriolanus', 14\], \['Virgilia', 'Coriolanus', 26\], \['Volsce', 'Coriolanus', 9\], \['Volumnia', 'Coriolanus', 57\], \['Young Coriolanus', 'Coriolanus', 1\], \['Cymbeline', 'Tragedies', null\], \['Arviragus', 'Cymbeline', 46\], \['Belarius', 'Cymbeline', 58\], \['Caius Lucius', 'Cymbeline', 25\], \['Cloten', 'Cymbeline', 77\], \['Cornelius (physician)', 'Cymbeline', 13\], \['Cymbeline, King of Britain', 'Cymbeline', 81\], \['Guiderius', 'Cymbeline', 62\], \['Helen', 'Cymbeline', 0\], \['Iachimo', 'Cymbeline', 77\], \['Imogen', 'Cymbeline', 118\], \['Jupiter', 'Cymbeline', 1\], \['Philario', 'Cymbeline', 14\], \['Pisanio', 'Cymbeline', 58\], \['Posthumus Leonatus', 'Cymbeline', 77\], \['Queen', 'Cymbeline', 27\], \['Roman Captain', 'Cymbeline', 4\], \['Sicilius Leonatus', 'Cymbeline', 7\], \['The Tragedy of Hamlet, Prince of Denmark', 'Tragedies', null\], \['Bernardo', 'The Tragedy of Hamlet, Prince of Denmark', 19\], \['Claudius, King of Denmark', 'The Tragedy of Hamlet, Prince of Denmark', 102\], \['Cornelius', 'The Tragedy of Hamlet, Prince of Denmark', 1\], \['Father\\'s Ghost', 'The Tragedy of Hamlet, Prince of Denmark', 15\], \['Fortinbras', 'The Tragedy of Hamlet, Prince of Denmark', 6\], \['Francisco ', 'The Tragedy of Hamlet, Prince of Denmark', 8\], \['Gertrude', 'The Tragedy of Hamlet, Prince of Denmark', 69\], \['Guildenstern', 'The Tragedy of Hamlet, Prince of Denmark', 29\], \['Hamlet', 'The Tragedy of Hamlet, Prince of Denmark', 358\], \['Horatio', 'The Tragedy of Hamlet, Prince of Denmark', 109\], \['Laertes', 'The Tragedy of Hamlet, Prince of Denmark', 62\], \['Lucianus', 'The Tragedy of Hamlet, Prince of Denmark', 0\], \['Marcellus', 'The Tragedy of Hamlet, Prince of Denmark', 37\], \['Ophelia', 'The Tragedy of Hamlet, Prince of Denmark', 58\], \['Osric', 'The Tragedy of Hamlet, Prince of Denmark', 25\], \['Polonius', 'The Tragedy of Hamlet, Prince of Denmark', 86\], \['Reynaldo', 'The Tragedy of Hamlet, Prince of Denmark', 13\], \['Rosencrantz', 'The Tragedy of Hamlet, Prince of Denmark', 48\], \['Voltemand', 'The Tragedy of Hamlet, Prince of Denmark', 1\], \['Julius Caesar', 'Tragedies', null\], \['Antony (Marcus Antonius)', 'Julius Caesar', 51\], \['Artemidorus of Cnidos', 'Julius Caesar', 4\], \['Brutus (Marcus Brutus)', 'Julius Caesar', 194\], \['Caesar (Julius Caesar)', 'Julius Caesar', 42\], \['Calpurnia', 'Julius Caesar', 6\], \['Casca', 'Julius Caesar', 39\], \['Cassius', 'Julius Caesar', 140\], \['Cicero', 'Julius Caesar', 4\], \['Cinna', 'Julius Caesar', 11\], \['Cinna the Poet', 'Julius Caesar', 8\], \['Claudius', 'Julius Caesar', 2\], \['Clitus', 'Julius Caesar', 8\], \['Dardanius', 'Julius Caesar', 3\], \['Decius Brutus', 'Julius Caesar', 12\], \['Flavius', 'Julius Caesar', 5\], \['Lepidus (Marcus Antonius Lepidus)', 'Julius Caesar', 3\], \['Ligarius', 'Julius Caesar', 5\], \['Lucilius', 'Julius Caesar', 10\], \['Lucius', 'Julius Caesar', 24\], \['Marullus', 'Julius Caesar', 6\], \['Messala', 'Julius Caesar', 20\], \['Metellus Cimber', 'Julius Caesar', 5\], \['Octavius (Octavius Caesar)', 'Julius Caesar', 19\], \['Pindarus', 'Julius Caesar', 5\], \['Popilius (Popilius Lena)', 'Julius Caesar', 2\], \['Portia (wife of Brutus)', 'Julius Caesar', 16\], \['Publius', 'Julius Caesar', 2\], \['Strato', 'Julius Caesar', 4\], \['Tintinius', 'Julius Caesar', 10\], \['Trebonius', 'Julius Caesar', 4\], \['Varro', 'Julius Caesar', 6\], \['Volumnius', 'Julius Caesar', 3\], \['Young Cato', 'Julius Caesar', 3\], \['King Lear', 'Tragedies', null\], \['Cordelia', 'King Lear', 31\], \['Curan', 'King Lear', 4\], \['Duke of Albany', 'King Lear', 58\], \['Duke of Burgundy', 'King Lear', 5\], \['Duke of Cornwall', 'King Lear', 53\], \['Earl of Gloucester', 'King Lear', 118\], \['Earl of Kent', 'King Lear', 127\], \['Edgar', 'King Lear', 98\], \['Edmund', 'King Lear', 79\], \['Goneril', 'King Lear', 53\], \['King of France', 'King Lear', 5\], \['Lear', 'King Lear', 188\], \['Oswald', 'King Lear', 38\], \['Regan', 'King Lear', 73\], \['The Tragedy Of Macbeth', 'Tragedies', null\], \['Angus', 'The Tragedy Of Macbeth', 4\], \['Banquo', 'The Tragedy Of Macbeth', 33\], \['Caithness', 'The Tragedy Of Macbeth', 3\], \['Donalbain', 'The Tragedy Of Macbeth', 3\], \['Duncan', 'The Tragedy Of Macbeth', 18\], \['Fleance', 'The Tragedy Of Macbeth', 2\], \['Hecate', 'The Tragedy Of Macbeth', 2\], \['Lady Macbeth', 'The Tragedy Of Macbeth', 59\], \['Lady Macduff', 'The Tragedy Of Macbeth', 19\], \['Lennox', 'The Tragedy Of Macbeth', 21\], \['Macbeth', 'The Tragedy Of Macbeth', 146\], \['Macduff', 'The Tragedy Of Macbeth', 59\], \['Malcolm', 'The Tragedy Of Macbeth', 40\], \['Menteith', 'The Tragedy Of Macbeth', 5\], \['Porter', 'The Tragedy Of Macbeth', 4\], \['Ross', 'The Tragedy Of Macbeth', 39\], \['Seyton', 'The Tragedy Of Macbeth', 5\], \['Siward', 'The Tragedy Of Macbeth', 11\], \['Son (Macduff\\'s son)', 'The Tragedy Of Macbeth', 14\], \['Young Siward', 'The Tragedy Of Macbeth', 4\], \['The Tragedy Of Othello', 'Tragedies', null\], \['Bianca (Mistress to Cassio)', 'The Tragedy Of Othello', 15\], \['Brabantio', 'The Tragedy Of Othello', 30\], \['Cassio', 'The Tragedy Of Othello', 110\], \['Desdemona', 'The Tragedy Of Othello', 165\], \['Duke of Venice', 'The Tragedy Of Othello', 25\], \['Emilia', 'The Tragedy Of Othello', 103\], \['Gratiano (Brother to Brabantio)', 'The Tragedy Of Othello', 20\], \['Iago', 'The Tragedy Of Othello', 272\], \['Lodovico', 'The Tragedy Of Othello', 33\], \['Montano', 'The Tragedy Of Othello', 24\], \['Othello', 'The Tragedy Of Othello', 274\], \['Roderigo', 'The Tragedy Of Othello', 59\], \['Romeo And Juliet', 'Tragedies', null\], \['Abraham', 'Romeo And Juliet', 5\], \['Balthasar (Servant to Romeo)', 'Romeo And Juliet', 12\], \['Benvolio', 'Romeo And Juliet', 64\], \['Capulet', 'Romeo And Juliet', 51\], \['Friar John', 'Romeo And Juliet', 4\], \['Friar Laurence', 'Romeo And Juliet', 55\], \['Gregory', 'Romeo And Juliet', 15\], \['Juliet', 'Romeo And Juliet', 118\], \['Lady Capulet', 'Romeo And Juliet', 45\], \['Lady Montague', 'Romeo And Juliet', 2\], \['Mercutio', 'Romeo And Juliet', 62\], \['Montague', 'Romeo And Juliet', 10\], \['Paris', 'Romeo And Juliet', 23\], \['Peter (Servant to Juliet\\'s Nurse)', 'Romeo And Juliet', 13\], \['Prince Escalus', 'Romeo And Juliet', 16\], \['Romeo', 'Romeo And Juliet', 163\], \['Sampson', 'Romeo And Juliet', 20\], \['Tybalt', 'Romeo And Juliet', 17\] \]); var tree = new google.visualization.TreeMap(document.getElementById('chart_div')); var options = { // For v49 or before highlightOnMouseOver: true, maxDepth: 1, maxPostDepth: 2, minHighlightColor: '#8c6bb1', midHighlightColor: '#9ebcda', maxHighlightColor: '#edf8fb', minColor: '#009688', midColor: '#f7f7f7', maxColor: '#ee8100', headerHeight: 15, showScale: true, height: 500, useWeightedAverageForAggregation: true }; var optionsV50 = { // For v50+ enableHighlight: true, maxDepth: 1, maxPostDepth: 2, minHighlightColor: '#8c6bb1', midHighlightColor: '#9ebcda', maxHighlightColor: '#edf8fb', minColor: '#009688', midColor: '#f7f7f7', maxColor: '#ee8100', headerHeight: 15, showScale: true, height: 500, useWeightedAverageForAggregation: true, // Use click to highlight and double-click to drill down. eventsConfig: { highlight: \['click'\], unhighlight: \['mouseout'\], rollup: \['contextmenu'\], drilldown: \['dblclick'\], } }; tree.draw(data, options); // Please uncomment the following line for v50+. // tree.draw(data, optionsV50); }

```javascript
      var options = { // For v49 or before
        highlightOnMouseOver: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true
      };
      var optionsV50 = { // For v50+
        enableHighlight: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true,
        // Use click to highlight and double-click to drill down.
        eventsConfig: {
          highlight: ['click'],
          unhighlight: ['mouseout'],
          rollup: ['contextmenu'],
          drilldown: ['dblclick'],
        }
      };
```

## Tooltips

By default, treemap tooltips are basic, showing the label of the
treemap cell. This is useful when the cells are too small to contain the
labels, but you can customize them further as described in this section.

Treemap tooltips are customized differently than other charts: you
define a function and then set the `generateTooltip` option
to that function. Here's a simple example:

In the above chart, we define a function called `showStaticTooltip` that simply returns a string with the HTML to be shown whenever the user hovers over a treemap cell. Try it! The code to generate that is as follows:

```
  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showStaticTooltip
  };

  tree.draw(data, options);

  function showStaticTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           'Read more about the <a href="http://en.wikipedia.org/wiki/Kingdom_(biology)">kingdoms of life</a>.</div>';
  }
```

The `generateTooltip` function can be any JavaScript you
like. Usually, you'll want tooltips that vary based on the data
values. The following example shows how to access every field in the
datatable.

If you hover over the cells in the above treemap, you'll see a
different tooltip for each cell. The treemap tooltip functions all
take three values: `row`, `size`,
and `value`.

- `row`: the cell's row from the datatable
- `size`: the sum of the value (column 3) of this cell and all its children
- `value`: the color of the cell, expressed as a number from 0 to 1

In `showFullTooltip`, the string we return is an HTML
box with five lines:

- Line 1 shows the appropriate row from the datatable, making liberal use of `data.getValue`.
- Line 2 tells you which row that is, which is just the `row` parameter.
- Line 3 gives you information from column 3 of the datatable: the sum of the value of column 3 from this row, plus the values from descendants.
- Line 4 gives you information from column 4 of the datatable. It's the value, but expressed as a number between 0 and 1 corresponding to the color of the cell.

```
  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showFullTooltip
  };

  tree.draw(data, options);

  function showFullTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           '<span style="font-family:Courier"><b>' + data.getValue(row, 0) +
           '</b>, ' + data.getValue(row, 1) + ', ' + data.getValue(row, 2) +
           ', ' + data.getValue(row, 3) + '</span><br>' +
           'Datatable row: ' + row + '<br>' +
	   data.getColumnLabel(2) +
           ' (total value of this cell and its children): ' + size + '<br>' +
	   data.getColumnLabel(3) + ': ' + value + ' </div>';
  }

}
```

## Loading

The `google.charts.load` package name is `"treemap"`.

```
  google.charts.load("current", {packages: ["treemap"]});
```

The visualization's class name is `google.visualization.TreeMap`.

```
  var visualization = new google.visualization.TreeMap(container);
```

## Data Format

Each row in the data table describes one node (a rectangle in the graph). Each
node (except the root node) has one parent node. Each node is sized and
colored according to its values relative to the other nodes currently shown.

The data table should have four columns in the following format:

- Column 0 - \[*string*\] An ID for this node. It can be any valid JavaScript string, including spaces, and any length that a string can hold. This value is displayed as the node header.
- Column 1 - \[*string*\] - The ID of the parent node. If this is a root node, leave this blank. Only one root is allowed per treemap.
- Column 2 - \[*number*\] - The size of the node. Any positive value is allowed. This value determines the size of the node, computed relative to all other nodes currently shown. For non-leaf nodes, this value is ignored and calculated from the size of all its children.
- Column 3 - \[*optional* , *number* \] - An optional value used to calculate a color for this node. Any value, positive or negative, is allowed. The color value is first recomputed on a scale from `minColorValue` to `maxColorValue`, and then the node is assigned a color from the gradient between `minColor` and `maxColor`.

## Configuration
Options

| Name ||
|---|---|
| enableHighlight (for v50+) | Determines if elements should show highlighted effects. The default trigger is when moused over. The trigger can be configured with `eventsConfig`. If set to `true`, highlighting for different elements can be specified using the various `highlightColor` options. **Type:** boolean **Default:** false |
| eventsConfig (for v50+) | The event configuration to trigger tree map interactions. Format to configure interactions: ```javascript eventsConfig: { interaction1: undefined, // or missing interaction2: [], // disable interaction3: [ 'mouse_event', 'optional_key1', 'optional_key2', 'optional_key3', 'optional_key4' ], ..., } ``` If the config array is undefined or missing for an interaction, the **default** will be used. If the config is an empty array, the interaction will be disabled. For a valid config, `mouse_event` is required and must be a supported mouse event. Then you can have up to four optional key modifiers. Supported interactions: :   *highlight, unhighlight, rollup, drilldown*. Supported mouse events: :   *'click', 'contextmenu', 'dblclick', 'mouseout', 'mouseover'* . With *'contextmenu'* corresponds to the right-click. Supported mouse event modifier keys: :   *'altKey', 'ctrlKey', 'metaKey', 'shiftKey'*. Get the current configuration: :   Call method [`getEventsConfig()`](https://developers.google.com/chart/interactive/docs/gallery/treemap#Methods). **Type:** object **Default:** ```javascript { highlight: ['mouseover'], unhighlight: ['mouseout'], rollup: ['contextmenu'], // right-click drilldown: ['click'] } ``` |
| fontColor | The text color. Specify an HTML color value. **Type:** string **Default:** #ffffff |
| fontFamily | The font family to use for all text. **Type:** string **Default:** auto |
| fontSize | The font size for all text, in points. **Type:** number **Default:** 12 |
| forceIFrame | Draws the chart inside an inline frame. (Note that on IE8, this option is ignored; all IE8 charts are drawn in i-frames.) **Type:** boolean **Default:** false |
| headerColor | The color of the header section for each node. Specify an HTML color value. **Type:** string **Default:** #988f86 |
| headerHeight | The height of the header section for each node, in pixels (can be zero). **Type** number **Default:** 0 |
| headerHighlightColor | The color of the header of a node being hovered over. Specify an HTML color value or null; if null this value will be `headerColor` lightened by 35%. **Type:** string **Default:** null |
| highlightOnMouseOver (deprecated for v50+) | Deprecated for v50+. For v50 and later, please use `enableHighlight`. Determines if elements should show highlighted effects when moused over. If set to `true`, highlighting for different elements can be specified using the various `highlightColor` options. **Type:** boolean **Default:** false |
| hintOpacity | When `maxPostDepth` is greater than 1, causing nodes below the current depth to be shown, `hintOpacity` specifies how transparent it should be. It should be between 0 and 1; the higher the value, the fainter the node. **Type:** number **Default:** 0.0 |
| maxColor | The color for a rectangle with a column 3 value of `maxColorValue`. Specify an HTML color value. **Type:** string **Default:** #00dd00 |
| maxDepth | The maximum number of node levels to show in the current view. Levels will be flattened into the current plane. If your tree has more levels than this, you will have to go up or down to see them. You can additionally see `maxPostDepth` levels below this as shaded rectangles within these nodes. **Type:** number **Default:** 1 |
| maxHighlightColor | The highlight color to use for the node with the largest value in column 3. Specify an HTML color value or null; If null, this value will be the value of `maxColor` lightened by 35% **Type:** string **Default:** null |
| maxPostDepth | How many levels of nodes beyond `maxDepth` to show in "hinted" fashion. Hinted nodes are shown as shaded rectangles within a node that is within the `maxDepth` limit. **Type:** number **Default:** 0 |
| maxColorValue | The maximum value allowed in column 3. All values greater than this will be trimmed to this value. If set to null, it will be set to the max value in the column. **Type:** number **Default:** null |
| midColor | The color for a rectangle with a column 3 value midway between `maxColorValue` and `minColorValue`. Specify an HTML color value. **Type:** string **Default:** #000000 |
| midHighlightColor | The highlight color to use for the node with a column 3 value near the median of `minColorValue` and `maxColorValue`. Specify an HTML color value or null; if null, this value will be the value of `midColor` lightened by 35%. **Type:** string **Default:** null |
| minColor | The color for a rectangle with the column 3 value of `minColorValue`. Specify an HTML color value. **Type:** string **Default:** #dd0000 |
| minHighlightColor | The highlight color to use for the node with a column 3 value nearest to `minColorValue`. Specify an HTML color value or null; if null, this value will be the value of `minColor` lightened by 35% **Type:** string **Default:** null |
| minColorValue | The minimum value allowed in column 3. All values less than this will be trimmed to this value. If set to null, it will be calculated as the minimum value in the column. **Type:** number **Default:** null |
| noColor | The color to use for a rectangle when a node has no value for column 3, and that node is a leaf (or contains only leaves). Specify an HTML color value. **Type:** string **Default:** #000000 |
| noHighlightColor | The color to use for a rectangle of "no" color when highlighted. Specify an HTML color value or null; if null, this will be the value of `noColor` lightened by 35%. **Type:** string **Default:** null |
| showScale | Whether or not to show a color gradient scale from `minColor` to `maxColor` along the top of the chart. Specify true to show the scale. **Type:** boolean **Default:** false |
| showTooltips | Whether to show tooltips. **Type:** boolean **Default:** true |
| textStyle | An object that specifies the text style, for certain charts that have text in the content area such as the treemap. The object has this format: ``` { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** object **Default:** ` {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} ` |
| title | Text to display above the chart. **Type:** string **Default:** no title |
| titleTextStyle | An object that specifies the title text style. The object has this format: ``` { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } ``` The `color` can be any HTML color string, for example: `'red'` or `'#00cc00'`. Also see `fontName` and `fontSize`. **Type:** object **Default:** ` {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} ` |
| useWeightedAverageForAggregation | Whether to use weighted averages for aggregation. **Type:** boolean **Default:** false |

## Methods

| Method ||
|---|---|
| `draw(data, options)` | Draws the chart. **Return Type:** none |
| `getEventsConfig() (for v50+)` | Returns the current interaction configuration. This can be used to verify the configuration option `eventsConfig` **Return Type:** Object ```javascript { // An empty array (i.e. []) means the interaction is disabled. highlight: string[], unhighlight: string[], rollup: string[], drilldown: string[] } ``` |
| `getSelection()` | Standard `https://developers.google.com/chart/interactive/docs/reference#visgetselection` implementation. Selected elements are nodes. Only one node can be selected at a time. **Return Type:** Array of selection elements |
| `setSelection()` | Standard `https://developers.google.com/chart/interactive/docs/reference#vissetselection` implementation. Selected elements are nodes. Only one node can be selected at a time. **Return Type:** none |
| `goUpAndDraw()` | Move up the tree by one level and redraw it. Does not throw an error if the node is the root node. This is fired automatically when the user right-clicks a node. **Return Type:** none |
| `getMaxPossibleDepth()` | Returns the maximum possible depth for the current view. **Return Type:** number |
| `clearChart()` | Clears the chart, and releases all of its allocated resources. **Return Type:** none |

## Events

Please refer to [`eventsConfig`](https://developers.google.com/chart/interactive/docs/gallery/treemap#Configuration_Options) for configurable event triggers.

| Name ||
|---|---|
| `onmouseover` | Fired when the user mouses over a node. The event handler is passed the row index of the corresponding entry in the data table. **Properties:** row |
| `highlight (for v50+)` | Fired when the user highlights a node. The default trigger is mouseover. It can be configured with [`eventsConfig`](https://developers.google.com/chart/interactive/docs/gallery/treemap#Configuration_Options) for v50+. The event handler is passed the row index of the corresponding entry in the data table. **Properties:** row |
| `onmouseout` | Fired when the user mouses out of a node. The event handler is passed the row index of the corresponding entry in the data table. **Properties:** row |
| `unhighlight (for v50+)` | Fired when the user unhighlights a node. The default trigger is mouseout. It can be configured with [`eventsConfig`](https://developers.google.com/chart/interactive/docs/gallery/treemap#Configuration_Options) for v50+. The event handler is passed the row index of the corresponding entry in the data table. **Properties:** row |
| `ready` | Fired when chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event *before* you call the `draw` method, and call them only after the event was fired. **Properties:** None |
| `rollup` | Fired when the user navigates back up the tree. The default trigger is right-clicking. It can be configured with [`eventsConfig`](https://developers.google.com/chart/interactive/docs/gallery/treemap#Configuration_Options) for v50+. The row property passed into the event handler is the row of the node that the user is navigating *from* , not the row the user is navigating *to*. **Properties:** row |
| `select` | Fired when the user drills down, or rolls up a node. Also fired when method `setSelection()` or `goUpAndDraw()` is called. To learn which node was selected, call [`getSelection()`](https://developers.google.com/chart/interactive/docs/gallery/treemap#Methods). **Properties:** none |
| `drilldown (for v50+)` | Fired when the user navigates deeper into the tree. The default trigger is clicking. It can be configured with [`eventsConfig`](https://developers.google.com/chart/interactive/docs/gallery/treemap#Configuration_Options) for v50+. To learn which node was clicked, call [`getSelection()`](https://developers.google.com/chart/interactive/docs/gallery/treemap#Methods). **Properties:** none |

## Data Policy

All code and data are processed and rendered in the browser. No data is sent to any server.