Skip to content

Tree diagram

A tree diagram (or dendrogram) takes the same data format as the treemap diagram, like this:

html
<tree
    data='{
    "name": "root",
    "children": [
            { "name": "A", "value": 10 },
            { "name": "B", "value": 20 },
            { "name": "C", "children": [
                { "name": "C1", "value": 10 },
                { "name": "C2", "value": 5 },
                { "name": "C3", "value": 15 }
            ]},
            { "name": "D", "value": 40 }
        ]
    }
    '>
</tree>

but is rendered differently:

The tree diagram can be drawn horizontally, as above, or vertically by setting the optional vertical parameter to true or false. The default value is false. Setting vertical to true creates a vertical tree diagram:

Released under the MIT License. | Privacy Policy