JavaScript
document.addEventListener('DOMContentLoaded', () => {
var options = new primitives.FamConfig();
var items = [
{ id: 1, title: "Father's Father 1" },
{ id: 2, title: "Father's Mother 1" },
{ id: 2, title: "Father's Mother 1" },
{ id: 3, title: "Mother's Mother 1" },
{ id: 4, title: "Mother's Father 1" },
{ id: 9, parents: [1, 2], title: "Father 1" },
{ id: 18, parents: [1, 2], title: "Father's Brother 1" },
{ id: 19, parents: [1, 2], title: "Father's Sister 1" },
{ id: 10, parents: [3, 4], title: "Mother 1" },
{ id: 20, parents: [3, 4], title: "Mother's Brother 1" },
{ id: 5, title: "Proband", parents: [9, 10] },
{ id: 6, title: "Father's Father 2" },
{ id: 7, title: "Father's Mother 2" },
{ id: 8, title: "Mother's Mother 2" },
{ id: 11, title: "Mother's Father 2" },
{ id: 12, parents: [6, 7], title: "Father 2" },
{ id: 13, parents: [8, 11], title: "Mother 2" },
{ id: 14, title: "Partner", parents: [12, 13] },
{ id: 15, title: "Son 1", parents: [5, 14] },
{ id: 16, title: "Son 2", parents: [5, 14] },
{ id: 17, title: "Daughter 1", parents: [5, 14] },
];
options.pageFitMode = primitives.PageFitMode.AutoSize;
options.autoSizeMinimum = new primitives.Size(100, 100);
options.autoSizeMaximum = new primitives.Size(2000, 2000);
options.items = items;
options.linesWidth = 1;
options.linesColor = "black";
options.hasSelectorCheckbox = primitives.Enabled.False;
options.normalLevelShift = 20;
options.dotLevelShift = 20;
options.lineLevelShift = 20;
options.normalItemsInterval = 10;
options.dotItemsInterval = 10;
options.lineItemsInterval = 10;
options.arrowsDirection = primitives.GroupByType.Parents;
options.showExtraArrows = false;
options.enableMatrixLayout = true;
...