Skip to content

[feat]: Add Dendrogram / Tree Diagram Component to Charts #10468

@Hemang-patel-9

Description

@Hemang-patel-9

Feature description

Currently, the shadcn/ui Charts registry provides excellent coverage for flat data distributions (Bar, Line, Pie) and standard radial charts. However, there is a significant gap for visualizing deep, hierarchical data structures.

I propose adding a Dendrogram (or Tree Diagram) component to the Charts collection.

As applications become more complex, developers frequently need to visualize nested data relationships. A native Dendrogram component would allow developers to easily display these hierarchies.

The implementation should feature:

  • Tailwind Theming: Seamless integration of tailwindcss
  • Customizable Edges: Support for different edge routing styles.
  • Interactive Nodes: Full integration with the existing Tooltip and HoverCard primitives to display metadata when a user interacts with a specific branch or leaf node.
  • Layout Orientations: Support for both horizontal (left-to-right) and vertical (top-to-bottom) flow.

Affected component/components

Charts, Tooltip

Additional Context

With the quick rise of AI agents, complex data management, and detailed analytical dashboards, standard flat charts often fall short. Developers creating sophisticated systems, such as visualizing an LLM agent's reasoning path, mapping out document chunking strategies for RAG pipelines, or showing deep knowledge graph taxonomies, need a clear user interface element. This element should display exactly how data branches out (e.g., User Prompt -> Sub-tasks -> Tool Invocations -> Execution Results).

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues and PRs

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions