Class Chart

Main Chart class - The primary class for creating and managing family tree visualizations.

This is the main entry point for the Family Chart library. Use this class to:

Create and configure family tree visualizations
Set up data, styling, and interaction options
Control tree layout, orientation, and display settings
Manage user interactions and updates

Example

const f3Chart = createChart('#FamilyChart', data)  // returns a Chart instance;

Constructors

constructor

new Chart(cont: string | HTMLElement, data: Data): Chart
Parameters
- cont: string | HTMLElement
- data: Data
Returns Chart
- Defined in core/chart.ts:58

Properties

afterUpdate

afterUpdate: null | Function

beforeUpdate

beforeUpdate: null | Function

cont

cont: HTMLElement

editTreeInstance

editTreeInstance: null | EditTree

getCard

getCard: null | (() => (d: TreeDatum) => void)

is_card_html

is_card_html: boolean

linkSpouseText

linkSpouseText: LinkSpouseText

personSearch

personSearch: any

store

store: Store

svg

svg: SVGElement

transition_time

transition_time: number

Methods

calculateKinships

calculateKinships(d_id: string, config?: KinshipInfoConfig): Kinships
Calculate the kinships of a person
Parameters
- d_id: string
  The id of the person to calculate the kinships of.
- config: KinshipInfoConfig = {}
  The config for the kinships.
  - show_in_law
    Whether to show in law relations.
Returns Kinships
The kinships of the person.
- Defined in core/chart.ts:370

editTree

editTree(): EditTree
Initialize the edit tree

Returns EditTree
The edit tree instance.
- Defined in core/chart.ts:399

getKinshipsDataStash

getKinshipsDataStash(main_id: string, rel_id: string): void | DatumKinship[]
Get the kinships data stash with which we can create small family tree with relatives that connects 2 people
Parameters
- main_id: string
  The id of the main person.
- rel_id: string
  The id of the person to get the kinships of.
Returns void | DatumKinship[]
The kinships data stash.
- Defined in core/chart.ts:380

getMainDatum

getMainDatum(): Datum
Get the main person

Returns Datum
The main person.
- Defined in core/chart.ts:433

getMaxDepth

getMaxDepth(d_id: string): { ancestry: number; progeny: number }
Get the max depth of a person in the ancestry and progeny
Parameters
- d_id: string
  The id of the person to get the max depth of.
Returns { ancestry: number; progeny: number }
The max depth of the person in the ancestry and progeny. {ancestry: number, progeny: number}
- Defined in core/chart.ts:359

setAfterUpdate

setAfterUpdate(fn: Function): Chart
Set the after update of the tree.
Parameters
- fn: Function
  The function to call after the update.
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:452

setAncestryDepth

setAncestryDepth(ancestry_depth: number): Chart
Set how many generations to show in the ancestry
Parameters
- ancestry_depth: number
  The number of generations to show in the ancestry.
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:337

setBeforeUpdate

setBeforeUpdate(fn: Function): Chart
Set the before update of the tree.
Parameters
- fn: Function
  The function to call before the update.
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:442

setCard

setCard(
card: (cont: HTMLElement, store: Store) => CardHtmlClass | CardSvgClass,
): CardHtmlClass | CardSvgClass
Set the Card creation function
Parameters
- card: (cont: HTMLElement, store: Store) => CardHtmlClass | CardSvgClass
Returns CardHtmlClass | CardSvgClass
The CreateChart instance
- Defined in core/chart.ts:246

setCardHtml

setCardHtml(): CardHtmlClass
Set the Card HTML function

Returns CardHtmlClass
The CardHtml instance
- Defined in core/chart.ts:256

setCardSvg

setCardSvg(): CardSvgClass
Set the Card SVG function

Returns CardSvgClass
The CardSvg instance
- Defined in core/chart.ts:274

setCardXSpacing

setCardXSpacing(card_x_spacing: number): Chart
Set the card x spacing
Parameters
- card_x_spacing: number
  The card x spacing between the cards. Node separation.
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:152

setCardYSpacing

setCardYSpacing(card_y_spacing: number): Chart
Set the card y spacing
Parameters
- card_y_spacing: number
  The card y spacing between the cards. Level separation.
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:136

setDuplicateBranchToggle

setDuplicateBranchToggle(duplicate_branch_toggle: boolean): Chart
Set whether to show toggable tree branches are duplicated
Parameters
- duplicate_branch_toggle: boolean
  Whether to show toggable tree branches are duplicated.
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:389

setLinkSpouseText

setLinkSpouseText(linkSpouseText: LinkSpouseText): Chart
Option to set text on spouse links
Parameters
- linkSpouseText: LinkSpouseText
  The function to set the text on the spouse links.
  
  Example: (sp1, sp2) => getMarriageDate(sp1, sp2)
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:220

setModifyTreeHierarchy

setModifyTreeHierarchy(
    modifyTreeHierarchy:
        | undefined
        | ((tree: HN, is_ancestry: boolean) => void),
): Chart
set function that will modify the tree hierarchy. it can be used to delete or add cards in the tree.
Parameters
- modifyTreeHierarchy: undefined | ((tree: HN, is_ancestry: boolean) => void)
  function that will modify the tree hierarchy.
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:196

setOrientationHorizontal

setOrientationHorizontal(): Chart
Set the orientation to horizontal

Returns Chart
The CreateChart instance
- Defined in core/chart.ts:175

setOrientationVertical

setOrientationVertical(): Chart
Set the orientation to vertical

Returns Chart
The CreateChart instance
- Defined in core/chart.ts:166

setPersonDropdown

setPersonDropdown(
    getLabel: Function,
    config?: {
        cont?: HTMLElement;
        onSelect?: (d_id: string) => void;
        placeholder?: string;
    },
): Chart
Set the person dropdown
Parameters
- getLabel: Function
  The function to get the label of the person to show in the dropdown.
- config: { cont?: HTMLElement; onSelect?: (d_id: string) => void; placeholder?: string } = {}
  The config for the person dropdown.
  - Optionalcont?: HTMLElement
    The container to put the dropdown in. Default is the .f3-nav-cont element.
  - OptionalonSelect?: (d_id: string) => void
    The function to call when a person is selected. Default is setting clicked person as main person and updating the tree.
  - Optionalplaceholder?: string
    The placeholder for the search input. Default is 'Search'.
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:466

setPrivateCardsConfig

setPrivateCardsConfig(private_cards_config: PrivateCardsConfig): Chart
Set the private cards config
Parameters
- private_cards_config: PrivateCardsConfig
  The private cards config.
  - condition: (d: Datum) => boolean
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:208

setProgenyDepth

setProgenyDepth(progeny_depth: number): Chart
Set how many generations to show in the progeny
Parameters
- progeny_depth: number
  The number of generations to show in the progeny.
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:348

setShowSiblingsOfMain

setShowSiblingsOfMain(show_siblings_of_main: boolean): Chart
Set whether to show the siblings of the main person
Parameters
- show_siblings_of_main: boolean
  Whether to show the siblings of the main person.
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:185

setSingleParentEmptyCard

setSingleParentEmptyCard(
single_parent_empty_card: boolean,
label?: { label?: string },
): Chart
Set whether to show the single parent empty card
Parameters
- single_parent_empty_card: boolean
  Whether to show the single parent empty card.
- label: { label?: string } = {}
  The label to display for the single parent empty card.
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:232

setSortChildrenFunction

setSortChildrenFunction(sortChildrenFunction: SortChildrenFunction): Chart
Set the sort children function
Parameters
- sortChildrenFunction: SortChildrenFunction
  The sort children function.
  
  Example: (a, b) => a.data.birth_date - b.data.birth_date
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:304

setSortSpousesFunction

setSortSpousesFunction(sortSpousesFunction: SortSpousesFunction): Chart
Set the sort spouses function
Parameters
- sortSpousesFunction: SortSpousesFunction
  The sort spouses function.
  
  Example: (d, data) => { const spouses = d.data.rels.spouses || [] return spouses.sort((a, b) => { const sp1 = data.find(d0 => d0.id === a) const sp2 = data.find(d0 => d0.id === b) if (!sp1 || !sp2) return 0 return getMarriageDate(d, sp1) - getMarriageDate(d, sp2) }) }) }
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:326

setTransitionTime

setTransitionTime(transition_time: number): Chart
Set the transition time
Parameters
- transition_time: number
  The transition time in milliseconds
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:292

unSetPersonSearch

unSetPersonSearch(): Chart
Unset the person dropdown

Returns Chart
The CreateChart instance
- Defined in core/chart.ts:497

updateData

updateData(data: Data): Chart
Update the data
Parameters
- data: Data
  The data to update the tree with.
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:126

updateMain

updateMain(d: Datum): Chart
Update the main person
Parameters
- d: Datum
  New main person.
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:408

updateMainId

updateMainId(id: string): Chart
Update the main person
Parameters
- id: string
  New main person id.
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:423

updateTree

updateTree(props?: ViewProps): Chart
Update the tree
Parameters
- props: ViewProps = ...
  The properties to update the tree with.
  - initial
    Whether to update the tree initially.
  - tree_position
    The position of the tree.
    
    'fit' to fit the tree to the container,
    
    'main_to_middle' to center the tree on the main person,
    
    'inherit' to inherit the position from the previous update.
  - transition_time
    The transition time.
Returns Chart
The CreateChart instance
- Defined in core/chart.ts:116

Class Chart

Example

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns Chart

Properties

afterUpdate

beforeUpdate

cont

editTreeInstance

getCard

is_card_html

linkSpouseText

personSearch

store

svg

transition_time

Methods

calculateKinships

Parameters

show_in_law

Returns Kinships

editTree

Returns EditTree

getKinshipsDataStash

Parameters

Returns void | DatumKinship[]

getMainDatum

Returns Datum

getMaxDepth

Parameters

Returns { ancestry: number; progeny: number }

setAfterUpdate

Parameters

Returns Chart

setAncestryDepth

Parameters

Returns Chart

setBeforeUpdate

Parameters

Returns Chart

setCard

Parameters

Returns CardHtmlClass | CardSvgClass

setCardHtml

Returns CardHtmlClass

setCardSvg

Returns CardSvgClass

setCardXSpacing

Parameters

Returns Chart

setCardYSpacing

Parameters

Returns Chart

setDuplicateBranchToggle

Parameters

Returns Chart

setLinkSpouseText

Parameters

Returns Chart

setModifyTreeHierarchy

Parameters

Returns Chart

setOrientationHorizontal

Returns Chart

setOrientationVertical

Returns Chart

setPersonDropdown

Parameters

Optionalcont?: HTMLElement

OptionalonSelect?: (d_id: string) => void

Optionalplaceholder?: string

Returns Chart

setPrivateCardsConfig

Parameters

`Optional`cont?: HTMLElement

`Optional`onSelect?: (d_id: string) => void

`Optional`placeholder?: string