Filter

You can use Filters to show/hide or edit particular nodes view dynamically, filtered by criteria. Filtering data in Org Chart JS is easy to do. You can filter by one or more criteria.

Add Filtering

To add the filter funtionality you need to add filterBy option in the chart configuration.
Then you should add template or CSS for the filtered nodes.

The value of filterBy can be:
- an array of node properties
- 'all'
- object that contains filtering properties and initial state values

You can also change the text values in the filter

 
   var chart = new OrgChart(document.getElementById("tree"), {
        //filterBy: ['title', 'city'],
        //filterBy: 'all',
        filterBy: {
            title: {
                'QA Lead': { checked: false, text: 'Leads not working'},
                'Manager': { checked: false, text: 'Managets not working'},
                'QA': { checked: true, text: 'QAs are working'},
            },
            name: {},
            city: {
                'Sofia': { checked: false }
            }
        },
        ...
    });
    

Hiding the filtered nodes

To hide the filtered nodes, you need to add filter in the tag configuration and set 'dot' for a template.

 
    var chart = new OrgChart(document.getElementById("tree"), {
        ...
        tags: {
            filter: {
                template: 'dot'
            }
        }
    });
    

Edit in BALKAN Code

Change the template of the filtered nodes

To change the template of the filtered nodes, you need to add filter in the tag configuration and set the desired template for it.

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            tags: {
                filter: {
                    template: 'filtered'
                }
        }
        });
    

Edit in BALKAN Code

Filtering with CSS

You can use CSS to change the filtered nodes:

 
    .filter rect, .filter image, .filter text, .filter use {
      filter: blur(10px);
    }
    

Edit in BALKAN Code

UI Customization

You can use these event listeners to change the filters UI: add-filter, add-item and show-items.

In the example below we are using:
add-filter to add reset filter functionality
add-item to count nodes in the filter list
show-item to highlight nodes from the hovered filter
Here is the code demo:

Edit in BALKAN Code