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, just add filterBy option in the chart configuration.
The value can be an array of node properties, 'all' or an 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' } } });
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' } } });
Filtering with CSS
You can use CSS to change the filtered nodes:
.filter rect, .filter image, .filter text, .filter use { filter: blur(10px); }