This GoJS sample was designed by Synergy Codes, our consultant partner with over a decade of experience and cooperation with the GoJS team.

This family tree diagram shows several generations of British royalty beginning with George V (1865-1936).

Node data contains information about gender, and a data binding assigns a corresponding color.

For a more rudimentary family tree, see the Japanese family tree sample.

For a more complex family tree see the genogram sample.

This sample demonstrates polished Node and Link template design, which involves considerable code and opinionated choices. It may be unsuitable as a starting point unless you want to copy these specific styles. As part of your evaluation, the GoJS team is happy to help you craft your own templates.

this forces the font to load in Chromium browsers


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