Code Samples

This page includes live examples on how to use the functionalities of PhyloCanvas


Load Tree

Using Newick string

var phylocanvas = new PhyloCanvas.Tree(div_name, [config object]); // initialize your tree viewer
var newick_str = "(A:0.1,B:0.2,(C:0.3,D:0.4)E:0.5)F;"
phylocanvas.load(newick_str); // load your newick string or file
View live

Using Newick file

var phylocanvas = new PhyloCanvas.Tree(div_name, [config object]); // initialize your tree viewer
var newick_file = "";
phylocanvas.load(newick_file); // load your newick string or file
View live View Newick file

Set Tree Type

A typechanged event is fired whenever a tree type is changed which invokes addSnapShot() to add a snapshot in the history.

phylocanvas.setTreeType('rectangular'); // Takes radial, rectangular, circular, diagonal and hierarchy
View live

Show/Hide Labels

To show or hide labels use the below functions

phylocanvas.displayLabels(); // Show labels
phylocanvas.hideLabels(); // Hide labels
// or
phylocanvas.toggleLabels(); // Toggle labels
View live


Each Branch has collapsed = true/false property which is used while drawing the tree to see if the branch has to be collapsed or not. The example below shows how you traverse through each branch and collapse one that matches a branch id.

// Here 'pcn5' is the branch id
phylocanvas.branches['pcn5'].collapsed = true;
View live

Increase Node / Label Size

UsesetNodeSize() and setTextSize() to change the size of node and text.

phylocanvas.setNodeSize = 10;
phylocanvas.setTextSize = 20;
View live

Color Nodes

setNodeColourAndShape is used to set the color and shape of a node.

phylocanvas.setNodeColourAndShape("1,2,3", 'orange', 'x');
nodeIds: (Array/String)
Array / comma separated string.
Color of the node in rgb/hex/colornames format Eg: red, rgb(255,0,0), #adadad
  • x = star
  • s = square
  • o = circle
  • t = triangle
Size of the node
View live

Color Branches

Setting backColour to true/false will colour the branches of the tree based on the colour of the tips

phylocanvas.backColour = true;
phylocanvas.setNodeColourAndShape('1', 'rgb(250, 150, 50)', 'x');
View live

Rotate Branch

Use the branch function rotate() to rotate a branch.

// Here 'pcn5' is the branch id
View live
Top Top


Right Click menu choices, an array of dictionaries with properties
You could configure them at the time of Tree initialization like below.

// Construct tree object
phylocanvas = new PhyloCanvas.Tree('phylocanvas', {
  // other options
  contextMenu : [{
    text: 'Normal Menu',
    handler: 'triggerNormal',
    internal: false,
    leaf: false
  }, {
    text: 'Internal Menu',
    handler: 'triggerInternal',
    internal: true,
    leaf: true
  }, {
    text: 'Save as PNG',
    handler: 'exportCurrentTreeView',
    internal: false,
    leaf: false
The label of the menu item
The function in the Tree object that the menu item invokes. If a node has been clicked on it is padded to the handler
Does this function apply to an internal node
Does this function apply to a leaf
View live

Overlay Metadata

If you store an object as {column_name: value} in the data attribute of each leaf node, then you could overlay metadata on to the tree by using the function viewMetadataColumns()

value = 0/1. All true values will be drawn as a rectangular block representing a presence or absence.

viewMetadataColumns() takes an array of column names as argument which is same as the column name stored in the data object. If no arguments are specified, then it will overlay all columns

See example below:

// Creating data object for few leaf nodes after tree load
phylocanvas.branches['1']['data'] = {'Column1': 1, 'Column2': 0};
phylocanvas.branches['3']['data'] = {'Column1': 0, 'Column2': 1};
phylocanvas.branches['9']['data'] = {'Column1': 0, 'Column2': 1};

phylocanvas.viewMetadataColumns(); // Display columns
View live

showMetadata = true/false is used to show or hide metadata