2

Dendrogram

PreviousNext

Hierarchical clustering tree visualization.

LifeAnimalsPlantsMammalsBirdsTreesFlowersDog85Cat72Whale95Eagle68Penguin62Oak120Pine95Rose45Tulip38
"use client"

import { Dendrogram } from "@/components/ui/charts/specialized/dendrogram"

const taxonomyData = {
  name: "Life",
  children: [
    {
      name: "Animals",
      children: [
        {
          name: "Mammals",
          children: [
            { name: "Dog", value: 85 },
            { name: "Cat", value: 72 },
            { name: "Whale", value: 95 },
          ],
        },
        {
          name: "Birds",
          children: [
            { name: "Eagle", value: 68 },
            { name: "Penguin", value: 62 },
          ],
        },
      ],
    },
    {
      name: "Plants",
      children: [
        {
          name: "Trees",
          children: [
            { name: "Oak", value: 120 },
            { name: "Pine", value: 95 },
          ],
        },
        {
          name: "Flowers",
          children: [
            { name: "Rose", value: 45 },
            { name: "Tulip", value: 38 },
          ],
        },
      ],
    },
  ],
}

export function DendrogramDemo() {
  return (
    <div className="mx-auto w-full max-w-2xl">
      <Dendrogram
        data={taxonomyData}
        orientation="horizontal"
        showLabels
        showValues
      />
    </div>
  )
}

About

A Dendrogram is a tree diagram showing hierarchical relationships. It's commonly used for displaying taxonomies, organizational structures, and hierarchical clustering results. Nodes are positioned using cluster layout to evenly distribute leaf nodes.

Installation

pnpm dlx shadcn@latest add https://ui.simplifying.ai/r/dendrogram.json

Usage

import { Dendrogram } from "@/components/ui/charts"
 
const data = {
  name: "Root",
  children: [
    {
      name: "Branch A",
      children: [
        { name: "Leaf 1", value: 10 },
        { name: "Leaf 2", value: 15 },
      ],
    },
    { name: "Leaf 3", value: 20 },
  ],
}
 
export function Example() {
  return <Dendrogram data={data} />
}

Variants

Vertical Orientation

Display the tree from top to bottom.

CEOCTOCFOCMOEngineering Lead8DevOps Lead4QA Lead5Accounting3Finance4Marketing6Sales12
"use client"

import { Dendrogram } from "@/components/ui/charts/specialized/dendrogram"

const orgData = {
  name: "CEO",
  children: [
    {
      name: "CTO",
      children: [
        { name: "Engineering Lead", value: 8 },
        { name: "DevOps Lead", value: 4 },
        { name: "QA Lead", value: 5 },
      ],
    },
    {
      name: "CFO",
      children: [
        { name: "Accounting", value: 3 },
        { name: "Finance", value: 4 },
      ],
    },
    {
      name: "CMO",
      children: [
        { name: "Marketing", value: 6 },
        { name: "Sales", value: 12 },
      ],
    },
  ],
}

export function DendrogramVertical() {
  return (
    <div className="mx-auto w-full max-w-xl">
      <Dendrogram
        data={orgData}
        orientation="vertical"
        showLabels
        showValues
        colorScheme={["#0891b2", "#06b6d4", "#22d3ee", "#67e8f9", "#a5f3fc"]}
      />
    </div>
  )
}

API Reference

PropTypeDefaultDescription
dataDendrogramNoderequiredRoot node of the tree
orientation"horizontal" | "vertical""horizontal"Tree orientation
nodeRadiusnumber5Node circle radius
showLabelsbooleantrueShow node labels
showValuesbooleanfalseShow node values
linkColorstring"#94a3b8"Color for connecting lines
colorSchemestring[]blue paletteColors by depth level

Notes

  • The dendrogram uses D3's cluster layout algorithm to evenly distribute leaf nodes
  • Node colors are automatically assigned based on tree depth level
  • Horizontal orientation is recommended for taxonomies with long labels
  • Vertical orientation works well for organizational charts
  • Each node can optionally have a value property that can be displayed when showValues is enabled