Show / Hide Table of Contents


This is used if you've made a mistake or by any other reason you want to undo the changes you have made. You can undo and redo many actions in Org Chart JS and you have a counters for both. Evey undo/redo action is saved in the Window sessionStorage property and can be saved in the database too.

How to add undo/redo buttons:

You just need to add the undoRedoStorageName property in the configuration with a string value, that will be the name of the storage:

    undoRedoStorageName: 'myStorageName',

How to update the database:

With undo/redo option you need to use the onUpdated method to update the database:

    // post config data to your server

    // args.config.nodes
    // args.config.clinks

UI customization:

You can use the onChange method to crete your own UI.


<button id="btn_undo">Undo</button>
<button id="btn_redo">Redo</button>
let btn_undo = document.getElementById('btn_undo');
let btn_redo = document.getElementById('btn_redo');

chart.undoRedoUI.onChange((args) => {    
    btn_undo.innerHTML = `undo (${args.undoStepsCount})`;          
    btn_redo.innerHTML = `redo (${args.redoStepsCount})`;        
    btn_undo.disabled = args.undoStepsCount == 0;
    btn_redo.disabled = args.redoStepsCount == 0;
    return false;
Here is a code demo: