How to change the color of selected node - Family Tree JS

How to change the color of selected node - Family Tree JS

This is step by step tutorial on how to change the color of selected node and BLUR nodes that are not part of tree of the selected family member.

This is step by step tutorial on how to change the color of selected node and BLUR nodes that are not part of hierarchy of the selected node. You will learn how to find and iterate all parent, children and partners nodes of the selected family memeber.

Step 1 - Installation

If you are already familiar with BALKAN FamilyTreeJS you can skip this step. There are two installation options: standalone or using npm

standalone installation See our getting started page

npm installation

npm i @balkangraph/familytree.js

Step 2 - Create BALKAN FamilyTreeJS instance

var family = new FamilyTree(document.getElementById("tree"), {
    nodeMouseClick: FamilyTree.action.none,
    mode: 'dark',
    nodeBinding: {
        field_0: "name",
        field_1: "birthDate",
        img_0: "photo",


The code above will create family tree instance in mode dark, with disabled Edit Form and nodeBinding property indicates that the fields 'name', 'birthDate' and 'photo' will be visible in the node boxes.

Step 3 - Add event listeners

The family tree will listen for 'click' and 'prerender' events.

family.on('click', function(sender, args){
    focusedNodeId =;

family.on("prerender", function(sender, args){
    if (focusedNodeId == null){
    var nodes = args.res.nodes;
    var node = nodes[focusedNodeId];
    iterate_parents(nodes, node);
    iterate_children(nodes, node);
    iterate_partners(nodes, node);
    for(var id in nodes){
        if (!nodes[id].tags.has('focused')){
    focusedNodeId = null;

The code above will add 'selected' tag to clicked node element and you can apply css style to that node. Here you can learn more how to customize foamily tree with CSS.

The next step is to add iteration methods to set 'blurred' tags for the nodes that are not part of the selected node. To do that we will need to iterate all parents, partners and children of the selected node.

function iterate_partners(nodes, node){        
    if (node.pids){
        for(var i = 0; i < node.pids.length; i++){
            var pnode = nodes[node.pids[i]];
            if (!pnode.tags.has('focused')){

function iterate_parents(nodes, node){
    if (!node.tags.has('focused')){
    var mnode = nodes[node.mid];
    var fnode = nodes[node.fid];

    if (mnode){
        iterate_parents(nodes, mnode);
    if (fnode){
        iterate_parents(nodes, fnode);

function iterate_children(nodes, node){
    if (node){
        if (!node.tags.has('focused')){
        for(var i = 0; i < node.ftChildrenIds.length; i++){
            var cnode = nodes[node.ftChildrenIds[i]];
            if (cnode.mid == || cnode.fid =={
                iterate_children(nodes, cnode);

Step 4 - Add CSS style to blur and highlight selected family member

.blurred rect, .blurred image, .blurred text, .blurred use {
  filter: blur(5px);

.selected rect{
  fill: #FFCA28 !important;

Filter 'blur' will blur nodes with 'blurred' tag, other filters that you can use. The color of the selected not will be yellow.

Click one of the nodes below to see the effect

Edit in BALKAN Code

Tell us if you have any questions in the comments below.

Customizing Filter UI - Code of The Week

Zoom Slider - Code of The Week

Bookmarks - Code of The Week

Customizing Search Results - Code of The Week

Introducing Undo Redo - Code Of The Week

Price adjustment announcement

The price will increase for new customers

Buttons for adding family members to a family tree - Code of The Week

Levels - Code of The Week

Change node color from a button in the Edit Form - Code of The Week

Filter and Highlight Nodes - Code of The Week

Up Expanding - Code Of The Week

Programmatically move the chart - Code of The Week

Siblings in Family Tree JS - Code of The Week

Purple template - Code of The Week

Assistant With Children - Code of The Week

Conditional Layout - Code of The Week

Conditional Color - Code of the Week

Sriniz Family Tree Template - Code of The Week

Color Picker - Code of The Week

Add company logo as watermark in exported PDF documents - Code of The Week

Mind map - Code of The Week

Create relationship with circle menu - Code of The Week

Animated Photos - Code of the Week

Grouped Dotted Lines - Code Of The Week

Dotted Lines - Code Of The Week

Department Dynamic Title - Code Of The Week

Add expand button for partners - Code of the Week

Change the sub levels with Drag and Drop - Code of The Week

Custom Edit From using Popover - Code of the Week

Sub levels tag option - Code of the Week

Highlights search results directly on Org Chart nodes - Code of the Week

Code of the Week/Relationship maps and Business process diagrams

Search using field name abbreviations - Code of the Week

Dynamic Template - Code of the Week

Read and Write local CSV file using File API and Org Chart JS - Code of The Week

Organizational Chart Path Highlighting and Selection

Modern Template - Org Chart JS

Performance - Org Chart JS

Single parent is supported in Family Tree JS

How To Develop a Flowchart Maker with Org Chart JS

How to upload a photo to Family Tree JS in .NET core

Family Tree with live tiles



The Latest BALKAN App News and Releases. Latest information on Org Chart JS and Family Tree JS.