Tree Chart

A tree graph is a network structure. It is constituted of a root node that gives birth to several nodes connected by edges or branches.


Example Color Themes

Example Fonts

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa


Show Code

Tools

<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>


<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
  <canvas id="canvasId" width="600" height="600"</canvas>
</div>


<!-- Create a script to initialize the chart -->
<script>

  <!-- Create the data for the graph -->
  var data = {
     "x" : {
        "Level1" : [null,"L1","L1","L1",null],
        "Level2" : [null,null,"L2","L2",null]
     },
     "y" : {
        "data" : [
          [1,2,3,4,5]
        ],
        "smps" : ["A","B","C","D","E"],
        "vars" : ["Order"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "graphType":"Tree",
     "hierarchy":[
        "Level1",
        "Level2"
     ],
     "showTransition":"true",
     "title":"Collapsible Tree"
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


</script>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-tree2-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/cX-tree2-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  smpAnnot=x,
  graphType="Tree",
  hierarchy=list("Level1", "Level2"),
  showTransition=TRUE,
  title="Collapsible Tree"
)
⇧