For a variation of this tree, see the British family tree sample.

For a more complex family tree see the genogram sample.

### GoJS Features in this sample

#### Table Panels

The "Table" Panel, Panel.Table, arranges objects in rows and columns. Each object in a Table Panel is put into the cell indexed by the value of GraphObject.row and GraphObject.column. The panel will look at the rows and columns for all of the objects in the panel to determine how many rows and columns the table should have. More information can be found in the GoJS Intro.

Related samples

#### Tree Layout

This predefined layout is used for placing Nodes of a tree-structured graph in layers (rows or columns). For discussion and examples of the most commonly used properties of the TreeLayout, see the Trees page in the Introduction. More information can be found in the GoJS Intro.

Related samples

#### ToolTips

A tooltip is an Adornment that is shown when the mouse hovers over an object that has its GraphObject.toolTip set. The tooltip part is bound to the same data as the part itself.

It is typical to implement a tooltip as a "ToolTip" Panel holding a TextBlock or a Panel of TextBlocks and other objects. Each "ToolTip" is just an "Auto" Panel Adornment that is shadowed, and where the border is a rectangular Shape with a light gray fill. However you can implement the tooltip as any arbitrarily complicated Adornment.

More information can be found in the GoJS Intro.

Related samples

#### Legend

A Legend can be created for a Diagram using a simple Part. Typically that is added directly to the Diagram as an unmodeled Part, not as a template with data in the Model. However you may want to define a template and add a legend data object to the model so that you can parameterize the legend with information persisted with the model.

Usually a legend will be created as an "Auto" Panel for a border around a "Table" Panel holding information about the types of nodes and/or links that are in the diagram.

It probably will want to be in the "ViewportBackground" or "ViewportForeground" Layer so that it is always visible in the viewport despite scrolling or zooming. Set the GraphObject.alignment property to position it where you want it to be; by default it will be in the lower right corner. However you may want to treat the legend Part as a regular Part in the Diagram, possibly laid out by the diagram's Diagram.layout.

More information can be found in the GoJS Intro.

Related samples