# Organization Chart - [Overview](https://developers.google.com/chart/interactive/docs/gallery/orgchart#Overview) - [Example](https://developers.google.com/chart/interactive/docs/gallery/orgchart#Example) - [Loading](https://developers.google.com/chart/interactive/docs/gallery/orgchart#Loading) - [Data Format](https://developers.google.com/chart/interactive/docs/gallery/orgchart#Data_Format) - [Custom Properties](https://developers.google.com/chart/interactive/docs/gallery/orgchart#customproperties) - [Configuration Options](https://developers.google.com/chart/interactive/docs/gallery/orgchart#Configuration_Options) - [Methods](https://developers.google.com/chart/interactive/docs/gallery/orgchart#Methods) - [Events](https://developers.google.com/chart/interactive/docs/gallery/orgchart#Events) - [Data Policy](https://developers.google.com/chart/interactive/docs/gallery/orgchart#Data_Policy) ## Overview *Org charts* are diagrams of a hierarchy of nodes, commonly used to portray superior/subordinate relationships in an organization. A family tree is a type of org chart. ## Example \

``` ## Loading The package name is `'orgchart'`. ``` google.charts.load('current', {packages: ['orgchart']}); ``` The visualization's class name is `google.visualization.OrgChart`. ``` var visualization = new google.visualization.OrgChart(container); ``` ## Data Format A table with three string columns, where each row represents a node in the orgchart. Here are the three columns: - Column 0 - The node ID. It should be unique among all nodes, and can include any characters, including spaces. This is shown on the node. You can specify a formatted value to show on the chart instead, but the unformatted value is still used as the ID. - Column 1 - \[*optional*\] The ID of the parent node. This should be the unformatted value from column 0 of another row. Leave unspecified for a root node. - Column 2 - \[*optional*\] Tool-tip text to show, when a user hovers over this node. Each node can have zero or one parent node, and zero or more child nodes. #### Custom Properties You can assign the following custom properties to data table elements, using the `https://developers.google.com/chart/interactive/docs/reference#DataTable_setProperty` method of [`DataTable`](https://developers.google.com/chart/interactive/docs/reference): | Property Name || |---|---| | selectedStyle | **Applies To:** DataTable row An inline style string to assign to a specific node when selected. You must set the option `allowHtml=true` for this to work, and it must be set before calling `draw()` on the visualization. This overrides the `selectionColor` option for the specified node. **Example:** `myDataTable.setRowProperty(2, 'selectedStyle', 'background-color:#00FF00');` | | style | **Applies To:** DataTable row An inline style string to assign to a specific node. This is overridden by the `selectedStyle` property. You must set the option `allowHtml=true` for this to work, and it must be set before calling `draw()` on the visualization. This overrides the `color` option for the specified node. **Example:** `myDataTable.setRowProperty(3, 'style', 'border: 1px solid green');` | ## Configuration Options | Name || |---|---| | allowCollapse | Determines if double click will collapse a node. **Type:** `boolean` **Default:** `false` | | allowHtml | If set to true, names that includes HTML tags will be rendered as HTML. **Type:** `boolean` **Default:** `false` | | color | **Deprecated. Use nodeClass instead.** The background color of the orgchart elements. **Type:** `string` **Default:** `'#edf7ff'` | | compactRows | If set to true, subtrees are placed as close as possible as long as nodes do not overlap. Use this option to reduce the overall drawing width and edge length. **Type:** `boolean` **Default:** `false` | | nodeClass | A class name to assign to node elements. Apply CSS to this class name to specify colors or styles for the chart elements. **Type:** `string` **Default:** `default class name` | | selectedNodeClass | A class name to assign to selected node elements. Apply CSS to this class name to specify colors or styles for selected chart elements. **Type:** `string` **Default:** `default class name` | | selectionColor | **Deprecated. Use selectedNodeClass instead.** The background color of selected orgchart elements. **Type:** `string` **Default:** `'#d6e9f8'` | | size | 'small', 'medium' or 'large' **Type:** `string` **Default:** `'medium'` | ## Methods | Method || |---|---| | `collapse(row, collapsed)` | Collapses or expands the node. - `row` - Index of the row to expand or collapse. - `collapsed` Whether to collapse or expand the row, where true means collapse. **Return Type:** `none` | | `draw(data, options)` | Draws the chart. **Return Type:** `none` | | `getChildrenIndexes(row)` | Returns an array with the indexes of the children of the given node. **Return Type** `Array.` | | `getCollapsedNodes` | Returns an array with the list of the collapsed node's indexes. **Return Type:** `Array.` | | `getSelection()` | Standard `getSelection()` implementation. Selection elements are all row elements. Can return more than one selected row. **Return Type:** Array of selection elements | | `setSelection(selection)` | Standard [`setSelection()`](https://developers.google.com/chart/interactive/docs/reference#vissetselection) implementation. Treats every selection entry as a row selection. Supports selection of mutiple rows. **Return Type:** none | ## Events | Name || |---|---| | collapse | Event triggered when `allowCollapse` is set to `true` and the user double clicks on a node with children. **Properties:** `collapsed` - A boolean indicating whether this is a 'collapse' or 'expand' event. `row` - The zero-based index of the row in the data table, corresponding to the node being clicked. | | onmouseover | Triggered when the user hovers over a specific row. **Properties:** `row` - The zero-based index of the row in the data table, corresponding to the node being moused over. | | onmouseout | Triggered when the user hovers out of a row. **Properties:** `row` - The zero-based index of the row in the data table, corresponding to the node being moused out from. | | select | Standard select event **Properties:** None | | ready | The 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 the methods only after the event is fired. **Properties:** None | ## Data Policy All code and data are processed and rendered in the browser. No data is sent to any server.