State

Persist the state (scale, position, expanded/collapsed and min/max nodes) in the url or indexedDB.

Default value: null

Options:

• name
• readFromLocalStorage
• writeToLocalStorage
• readFromIndexedDB
• writeToIndexedDB
• readFromUrlParams
• writeToUrlParams

Code example:

state={{
    name: 'StateForMyTree',
    readFromLocalStorage: true,
    writeToLocalStorage: true,
    readFromIndexedDB: true,
    writeToIndexedDB: true,
    readFromUrlParams: true,
    writeToUrlParams: true
}}

1. Local storage

Use name to save a state name.

Code example:

state={{
  name: 'StateForMyOrgChart',
  readFromLocalStorage: true,
  writeToLocalStorage: true,       
}}

Use stateToUrl method to open the saved state in the browser.

Signature:

chart.current?.stateToUrl();

You can see the result here:

You can test the state here by collapsing some nodes, changing the position of the chart and refreshing the page (F5).

Limitation: most browsers have a 5MB limit for local storage.

Local Storage

2. IndexedDB

Usage is the same as Local storage.
Limitations: does not work in iframe.

Code example:

state={{
    name: 'StateForMyTree',
    readFromIndexedDB: true,
    writeToIndexedDB: true,
}}

3. URL

URL

Priority

1. readFromUrlParams
2. readFromLocalStorage
3. readFromIndexedDB